vue中向data添加新属性的三种方式小结

下面是详细讲解 "vue中向data添加新属性的三种方式小结" 的攻略：

方式一：使用 Vue.set() 或 this.$set()

Vue提供了 Vue.set() 和 this.$set() 方法，可以动态向data中添加属性，实现数据双向绑定。

<template>
  <div>
    <h2>{{ person.name }}</h2>
    <button @click="addAge">添加年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '张三',
      },
    };
  },
  methods: {
    addAge() {
      this.$set(this.person, 'age', 18);
    },
  },
};
</script>

方式二：使用 Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，如果目标对象中已有该属性，则覆盖。

<template>
  <div>
    <h2>{{ person.name }}</h2>
    <button @click="addAge">添加年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '张三',
      },
    };
  },
  methods: {
    addAge() {
      this.person = Object.assign({}, this.person, { age: 18 });
    },
  },
};
</script>

方式三：使用 $set() 方法

在vue实例中，$set() 方法是对 Vue.set() 方法的封装，用法跟 Vue.set() 相同。

<template>
  <div>
    <h2>{{ person.name }}</h2>
    <button @click="addAge">添加年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '张三',
      },
    };
  },
  methods: {
    addAge() {
      this.$set(this.person, 'age', 18);
    },
  },
};
</script>

以上就是三种动态向data中添加属性的方法，希望对你有所帮助。