做项目遇到Vue的“坑”。
实例：
HTML
<div id="app">
<div>
<div>姓名：{{info.uname}}</div>
<div>年龄{{info.age}}</div>
<div>自定义：{{info.abc}}</div>
</div>
<div>
<button @click='handle'>点击</button>
</div>
</div>
js
var vm = new Vue({
el: '#app',
data: {
info: {
uname: 'lisi',
age: 12
}
},
methods: {
handle () {
this.info.age = 13;
// 动态的添加了一个属性
this.info.abc = 'haha'
}
}
});
记得：引入 vue.js文件 这是第一次执行的结果：第一次具备响应能力。 第二次 我在控制台修改 数据 第三次： 再次修改数据
总结：
vue中data中的数据必须提前定义好。
如果没有在data提前定义的数据，而是后来动态添加的，那么该数据没有响应式的能力
解决方法、提前定义好数据。
但是，如果确实需要动态添加数据，并且具备响应式能力
可以使用 this.$set方法添加数据
// Vue.set(this.info, 'abc', 'hi');
运用：
methods: {
handle () {
this.info.age = 13;
// 动态的添加了一个属性
首先你能确定是否能找到Vue实例：
Vue.set(this.info, 'abc', 'hi');
找不到？？ 用这个-----》
this.$set(this.info, 'abc', 'hi');
}
}
