对VUE中的对象添加属性

对VUE中的对象添加属性，可以通过以下步骤进行：

步骤1：定义一个VUE对象

<script>
export default {
  data () {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
}
</script>

步骤2：添加属性

接下来就可以随时添加属性了，可以通过以下两种方式：

方式1：this.$set

<script>
export default {
  methods: {
    addProperty() {
      this.$set(this.user, 'gender', '男')
    }
  }
}
</script>

方式2：Vue.set

<script>
import Vue from 'vue'

export default {
  methods: {
    addProperty() {
      Vue.set(this.user, 'gender', '男')
    }
  }
}
</script>

其中，通过 this.$set 或 Vue.set 添加的属性，都会被观察到并通知到Vue的响应系统中，使得数据驱动视图的双向绑定可以正常工作。

示例说明：

假如我们需要一个用户对象，里面包含姓名、年龄、性别等属性，但是初始时没有性别属性。

我们就可以通过以上两种方式，动态地向用户对象中添加性别属性，并进行相关操作，例如在模板中显示、提交到服务端等。

具体案例可以参考以下示例：

<template>
  <div>
    <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
    <p>性别：{{ user.gender }}</p>
    <button @click="addProperty">添加性别属性</button>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data () {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  },
  methods: {
    addProperty() {
      this.$set(this.user, 'gender', '男')
    }
  }
}
</script>

在上述代码中，我们定义了一个用户对象 user，包含姓名和年龄属性，然后我们给 user 对象动态添加了一个性别属性，在模板中读取与展示了 user.gender 属性，最后添加"添加性别属性"的按钮，点击后通过调用 this.$set 方法即可将性别属性设置到 user 对象中。