vue使用watch监听对象中的属性
vue提供了一个watch方法,可以监听data内的相应数据变动,触发相应的方法。例如监听对象的变化:data: function() {return {objArr: [{ id: 1, name: '李四' }],}},监听对象objArr的变化:watch: {// 如果是要对数组列表项的内容是否发生改变做监听,则需要加上一个【deep:true】属性。objArr: {
·
vue提供了一个watch方法,可以监听data内的相应数据变动,触发相应的方法。
例如监听对象的变化:
data: function() {
return {
objArr: [{ id: 1, name: '李四' }],
}
},
监听对象objArr的变化:
watch: {
// 如果是要对数组列表项的内容是否发生改变做监听,则需要加上一个【deep:true】属性。
objArr: {
handler(newVal, oldVal) {
// do something
},
// 这个属性表示深度监听,可以监听到对象、数组的内容变化。
deep: true,
},
},
使用deep: true就会监听对象的每一个属性,如果要监听对象的某个属性,可以这样写。
'objArr.name': {
handler: function() {
//do something
},
},
还可以巧用计算属性来实现
computed: {
getName: function() {
return this.objArr.name
},
},
watch: {
getName: {
handler: function() {
//do something
},
},
},
更多推荐
已为社区贡献6条内容
所有评论(0)