在做vue 项目时，有时候需要给data中的对象（obj）添加新的属性（a），并用新的属性做页面显示或者v-if控制，但需要注意的是直接设置新属性的值（this.obj.a=1）vue不会做双向绑定，也就是说页面根本就拿不到这个属性。下面的用法是错误的，你能看出是哪里错吗？页面会输出什么呢？
<template>
<div @click="addCount">click me {{obj.a}}</div>
</template>
<script>
export default {
data() {
return {
obj: {}
};
},
mounted() {
this.obj.a = 0
},
methods: {
addCount() {
this.obj.a = 1
},
},
};
</script>
2、正确用法
要想新添加的属性支持vue双向绑定，我们应该使用this.$set方法来进行首次赋值。注意：这里说的是首次赋值
用法如下：
this.$set(对象, 新属性, 值)
修改之前的错误示例
<template>
<div @click="addCount">click me {{obj.a}}</div>
</template>
<script>
export default {
data() {
return {
obj: {}
};
},
mounted() {
this.$set(this.obj, "a", 0)
},
methods: {
addCount() {
this.obj.a = 1
},
},
};
</script>
