vue实现动态给data函数中的属性赋值

要实现动态地给Vue的data函数中的属性赋值，可以使用Vue.set()方法或this.$set()方法。这两个方法的作用是一样的，都可以在不直接修改对象的情况下更新响应式数据。

具体方法如下：

使用Vue.set()

Vue.set()方法接收三个参数，分别是需要更新的对象、需要更新的属性名以及属性值。

例如，假设data函数返回的对象如下：

data() {
  return {
    obj: {
      name: 'Lisa',
      age: 20
    }
  }
}

现在想要动态地给obj对象添加一个gender属性并赋值为'female'，可以使用如下代码：

Vue.set(this.obj, 'gender', 'female')

这样，obj对象就会被更新，并且新的gender属性也被添加到了obj对象中。

使用this.$set()

this.$set()方法的使用方式和Vue.set()方法是一样的，同样接收三个参数。

例如，上面的例子也可以使用如下代码来实现：

this.$set(this.obj, 'gender', 'female')

这个时候，obj对象也会被更新，并且添加了新的gender属性。

示例说明

下面通过两个例子进一步说明Vue.set()和this.$set()的使用：

示例1：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    updateMessage() {
      // 使用Vue.set()方法动态地给data添加一个属性
      Vue.set(this, 'newMessage', 'Hello, Vue!')
    }
  }
}
</script>

在上面的例子中，当点击按钮时，会调用updateMessage方法，并使用Vue.set()方法给当前组件实例添加一个新的属性newMessage。这样，模板中的{{ newMessage }}就会显示出Hello, Vue!。

示例2：

<template>
  <div>
    <p>{{ obj.name }} is {{ obj.age }} years old.</p>
    <button @click="updateObject">Update Object</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'Lisa',
        age: 20
      }
    }
  },
  methods: {
    updateObject() {
      // 使用this.$set()方法动态地添加属性
      this.$set(this.obj, 'gender', 'female')
    }
  }
}
</script>

在上面的例子中，当点击按钮时，会调用updateObject方法，并使用this.$set()方法给obj对象动态地添加一个新的属性gender。这样，模板中的{{ obj.gender }}就会显示出female。