vue中this.$set()的基本用法实例

关于“vue中this.$set()的基本用法实例”的完整攻略，我来详细介绍。

什么是Vue中的this.$set()?

在Vue中，你可以定义一个响应式的数据对象，这意味着当你修改数据时，你的界面会自动更新。Vue内部使用ES5的Object.defineProperty API来实现这一点。

然而，这个API在对象被创建时就将其所有属性转换为getter/setter形式。这对于静态的对象来说没有问题，但是如果为对象添加一个新的属性，就需要使用Vue.set()方法来让Vue知道新添加的属性是响应式的。

Vue提供了一个实例方法 $set()，可以用于向响应式对象添加新的属性，并且通知Vue哪些数据被修改。

具体示例如下：

this.$set(obj, 'newProp', 123)

以上代码实际上是在obj对象中添加了一个名为newProp的属性，值为123。如果这个对象之前没有对应的属性，这个属性会被监听并且更新界面。

示例一：在循环中使用v-for

<template>
  <ul>
    <li v-for="(item,index) in list" :key="index" @click="add(index)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'John' },
        { name: 'Doe' },
        { name: 'Lisa' }
      ]
    }
  },
  methods: {
    add(index) {
      this.$set(this.list[index], 'age', 25)
    }
  }
}
</script>

在这个示例中，我们使用了v-for指令来循环一个列表。当点击某一项时，我们想向该项添加一个age属性。但是，由于该列表是响应式的，直接添加属性是不会触发视图更新的。这时，我们就需要使用this.$set()方法来设置响应式数据。

示例二：在组件中使用动态属性

<template>
  <div>
    <input v-model="dynamic"><button @click="handler">添加属性</button>
    <p>{{ obj[dynamic] }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'John',
        age: 20
      },
      dynamic: 'job'
    }
  },
  methods: {
    handler() {
        this.$set(this.obj, this.dynamic, 'developer')
    }
  }
}
</script>

在这个示例中，我们定义了一个包含动态属性的对象。我们想支持用户在运行时添加属性。通过使用this.$set()方法，我们可以将动态属性添加到对象中，并触发响应式更新。

以上就是关于“vue中this.$set()的基本用法实例”的完整攻略。希望对你有所帮助！