Vue2监听属性改变看的实例代码

效果：

代码：

div id='app2 '标签幼儿园入学年龄(3 ~ 6):/label输入类型=' number ' v-model=' child。age ' button @ click=' old '/button button @ click=' young '-/button p v-show=' haser ' { errMsg } }/p/div script var app=new Vue({ El : ' # app 2 '，数据： { child : { age :2 }，hasErr:false，errMsg: ' ' }，methods:}，young 3: function(){ this。孩子。年龄-；}，hiderer : function(){ var self=this；setTimeout(函数(){ self。haserr=false},3000);} }, //构造器内的观看观看： { '儿童。age ' :函数(NewVal，oldVal){ if(NewVal 6){ this。孩子。年龄=6岁；this.errMsg='不得大于6岁；this.hasErr=truethis。hiderer()；} } } });应用程序.$watch('child.age '，函数(newVal，oldVal){ if(NewVal 3){ app。孩子。年龄=3岁；app.errMsg='不得小于3岁；app.hasErr=真；app。hiderer()；} }，{deep:true，immediate : true })；//深度默认真正的即时指示是否立即以表达式的当前值触发回调/script以上这篇Vue2监听属性改变看的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。