vue给对象动态添加属性和值的实例

下面是详细讲解“vue给对象动态添加属性和值的实例”的完整攻略：

1. 前置知识

在使用Vue开发过程中，我们经常需要动态给对象添加属性和值。Vue提供了内置方法Vue.set和this.$set来实现对象属性的动态添加。

2. 使用Vue.set

Vue提供了Vue.set方法来实现给对象动态添加属性和值，其语法如下：

Vue.set(object, key, value)

其中，object表示要添加属性和值的对象；key表示要添加的属性名；value表示要添加的属性值。

示例：

<template>
  <div>
    <p>{{ book.name }}</p>
    <p>{{ book.price }}</p>
    <button @click="addAttr">添加属性</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      book: {
        name: 'Vue.js入门',
        price: 23.5
      }
    }
  },
  methods: {
    addAttr() {
      // 给book对象添加属性author和language
      Vue.set(this.book, 'author', '张三')
      Vue.set(this.book, 'language', '中文')
    }
  }
}
</script>

在上述示例代码中，我们给book对象动态添加了两个属性author和language，并且在模板中展示出来。

3. 使用this.$set

除了使用Vue.set方法外，Vue还提供了this.$set方法，使用方式与Vue.set类似。其语法如下：

this.$set(object, key, value)

其中，object表示要添加属性和值的对象；key表示要添加的属性名；value表示要添加的属性值。

示例：

<template>
  <div>
    <p>{{ book.name }}</p>
    <p>{{ book.price }}</p>
    <button @click="addAttr">添加属性</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      book: {
        name: 'Vue.js入门',
        price: 23.5
      }
    }
  },
  methods: {
    addAttr() {
      // 给book对象添加属性author和language
      this.$set(this.book, 'author', '张三')
      this.$set(this.book, 'language', '中文')
    }
  }
}
</script>

在上述示例代码中，我们同样使用this.$set方法给book对象动态添加了两个属性author和language，并且在模板中展示出来。

综上所述，Vue提供了Vue.set和this.$set方法来实现对象属性的动态添加，使用起来非常方便。