妙用Vue中的this.$set，动态修改对象，实时更新页面

2023-09-15 12:22:25

Vue.js中，this.$set方法是一个非常强大的工具，它允许我们在运行时动态修改对象，从而在页面上实时更新数据。这使得我们能够轻松地处理动态数据，并创建更具交互性的应用程序。

this.$set的基本用法

this.$set方法的语法很简单：

this.$set(target, key, value)

target： 要修改的对象。
key： 要修改的属性的名称。
value： 新的值。

例如，我们有一个名为person的对象：

const person = {
  name: 'John',
  age: 30
}

如果我们想动态地修改person对象的age属性，我们可以使用this.$set方法：

this.$set(person, 'age', 31)

这将把person对象的age属性的值修改为31。

this.$set的局限性

需要注意的是，this.$set方法只能用于修改对象和数组。它不能用于修改原始类型，如字符串、数字和布尔值。

此外，this.$set方法只能用于修改响应式对象和数组。响应式对象和数组是指使用Vue.set()方法创建的对象和数组。

总结

this.set方法是Vue.js中一个非常强大的工具，它允许我们在运行时动态修改对象，从而在页面上实时更新数据。掌握this.set的用法，可以让我们更轻松地处理动态数据，并创建更具交互性的应用程序。

实例

下面是一个使用this.$set方法的实例：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
    <button @click="changeAge">Change Age</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: 'John',
        age: 30
      }
    }
  },
  methods: {
    changeAge() {
      this.$set(this.person, 'age', 31)
    }
  }
}
</script>