第一个浅度监听:
{{a}}
{{b}}
var vm=new Vue({
el:"#app",
data:{
a:10,
b:15
}
});
vm.$watch("a",function(){
alert('a变化了');
this.b=100;
});
document.οnclick=function(){
vm.a=2
}
第二个深度监听
{{a|json}}
{{b}}
var vm = new Vue({
el: "#app",
data: {
a: { id: "1", title: "width" },
b: 15
}
});
vm.$watch("a", function() {
alert('a变化了');
this.b = 100;
}, { deep: true });
document.onclick = function() {
vm.a.id = "2";
}
ps:下面看下vue中watch用法
对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;
//使用官方vue-cli脚手架书写
//观察数据为字符串或数组
/当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数
export default {
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(curVal,oldVal){
console.log(curVal,oldVal);
},
example1:'a',//值可以为methods的方法名
example2:{
//注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
handler(curVal,oldVal){
conosle.log(curVal,oldVal)
},
deep:true
}
},
methods:{
a(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
}
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网