<template>
<div id="app">
<ul>
<li v-for="item in list" :v-key="item.id">{{item.name}}</li>
</ul>
<div>
<input type="text" v-model="value" />
<button @click="add()">添加</button>
<button @click="change()">改变</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
return {
list: [{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四',
ceshi:0,
list:[
{
a:0
}
]
}
],
value: '45'
}
},
created() {
},
mounted() {
},
watch: {
list: {
handler(newName, oldName) {
console.log('触发监听',this.list,this.list[1].list[0].a);
},
// 开启深度监听
deep: true
}
},
methods: {
add() {
console.log(this.value)
const listItem = {
id: this.list.length,
name: this.value
}
this.list.push(listItem)
},
change() {
// this.list[1].name = this.list[1].name === "赵四" ? '李四' : '赵四'
this.list[1].list[0].a=this.list[1].list[0].a=== 0 ? 1 : 0
}
}
}
</script>
vue中watch的deep属性深度监听数组对象
最新推荐文章于 2024-07-28 19:44:27 发布
这个博客展示了如何在Vue.js中使用`v-for`指令进行数据遍历,以及`v-model`实现双向数据绑定。在`methods`里定义了`add()`和`change()`方法,用于动态添加列表项和修改数据。同时,通过`watch`深度监听`list`属性的变化,当列表中子对象的属性变更时会触发回调。
摘要由CSDN通过智能技术生成