vue给对象增加属性

在Vue中，给对象增加属性有多种方法。

第一种方法是在Vue实例的data对象中直接添加属性。在data对象中定义的属性可以在Vue实例的模板中直接使用，而且这些属性也是响应式的。例如，如果我们想在Vue实例中添加一个名为person的对象属性，可以在data中添加如下代码：

data() {
  return {
    person: {
      name: 'John',
      age: 20
    }
  }
}

在模板中，我们可以直接访问和使用person对象的属性：

<div>{{ person.name }}</div>
<div>{{ person.age }}</div>

第二种方法是通过Vue.set方法向对象添加属性。Vue.set方法是Vue提供的一个全局方法，可以在对象上添加响应式的属性。使用Vue.set方法添加的属性也可以在模板中直接使用。例如，我们可以使用如下代码给person对象添加一个新的属性：

Vue.set(this.person, 'address', 'Beijing')

在模板中，我们可以直接访问和使用新添加的属性：

<div>{{ person.address }}</div>

第三种方法是直接通过赋值的方式给对象添加属性。然而，这种方式添加的属性不是响应式的，所以在模板中无法直接使用新添加的属性。例如，我们可以使用如下代码给person对象添加一个新的属性：

this.person.gender = 'male'

但是在模板中无法直接访问和使用新添加的属性。如果希望新添加的属性是响应式的，可以使用Vue.set方法或者在data中预先定义对象的所有属性。