html:
<div id="box">
<ul>
<li v-for="item in arr" :key="item">{{item}}</li>
<button @click="add">添加</button>
<p>
{{obj.name}}
</p>
<p>
{{obj.sex}}
</p>
<button @click="addObj">添加</button>
</ul>
</div>
js:
new Vue({
data: {
arr: ['张飞', '关羽', '刘备'],
obj: {
name: '如花'
}
},
methods: {
add() {
// 只要是数组的方法改变了数组,都可以引起页面的重新渲染
// 错误 页面不会重新渲染
// this.arr[3]='诸葛亮'
// console.log(this.arr)
// this.$set(操作的数组,下标,'要添加的项')
// Vue.set(操作的数组,下标,'要添加的项')
// this.$set(this.arr,3,'诸葛亮')
// Vue.set(this.arr,3,'诸葛亮')
},
addObj() {
// 错误的:页面不会重新渲染
// this.obj.sex='男'
// console.log(this.obj)
// this.$set(操作的对象,键,键值)
// Vue.set(操作的对象,键,键值)
// this.$set(this.obj,'sex','男')
Vue.set(this.obj, 'sex', '男')
console.log(this.obj);
}
}
}).$mount('#box')