Vue提供了一个watch方法可以监听data内指定数据变化
监听简单数据
当value1或value2的内容发生变化时,就会分别调用value1()方法或value2()方法
注意:watch里面的方法名与data内的值名一致
data() {
return {
value1: 0,
value2: 0
}
},
watch: {
value1(newValue, oldValue) {
console.log('当前值:'+newValue+"旧值:"+oldValue);
},
value2(newValue, oldValue) {
console.log('当前值:'+newValue+"旧值:"+oldValue);
}
}
监听对象所有属性
要想监听数组或对象就得 加 deep:true 语句,做深度监听
一旦所监听的对象的任何一个属性改变,都会触发 watch
data() {
return {
infos: {
name:'djb',
sex: 'boy'
}
}
},
watch: {
infos: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
监听对象具体属性
要想监听具体属性,还得与计算属性computed配合
只有当name属性发生变化时,触发 watch
data() {
return {
infos: {
name: djb,
sex: 'boy'
}
}
},
computed: {
getName: function() {
return this.infos.name //监听的具体属性
}
}
watch: {
getName: {
handler: function(newValue, oldValue) {
console.log(newValue)
},
}
}
如果想监听对象中的多个指定值,可以如下的操作
data() {
return {
rexiaos:[
{
name: djb,
sex: 'boy'
},
{
name: hw,
sex: 'boy'
},
{
name: ch,
sex: 'boy'
}
]
}
},
computed: {
getName: function() {
var infos=[];
$.each(this.rexiaos,function(index,value){
infos.push(value.name)
});
return infos;
}
}
watch: {
getName: {
handler: function(newValue, oldValue) {
console.log(newValue)
},
}
}
有什么不懂的可加我 微信公众号 “敲呗” ,留言给我,我会尽力帮您解决