Vue watch侦听属性
程序员文章站
2022-04-24 10:22:04
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>watch侦听属性</title>
</head>
<body>
<div id="test">
<ul>
<li>{{msg}}</li>
<li>{{msg01}}</li>
<li>{{msg02}}</li>
<li>{{msg03}}</li>
<br>
{{info.a}} -- {{info.b}}
</ul>
</div>
<script>
/*
* 类型：{ [key: string]: string | Function | Object | Array }
* 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，
* 遍历 watch 对象的每一个 property。
*/
const app =new Vue({
el:"#test",
data:{
msg:"Hello watch",
msg01:"",
msg02:"",
msg03:"",
info:{
a:1,
b:2
},
},
watch: {
/*
含税形式
msg(newVal,oldVal){
this.msg01 = newVal + "01";
this.msg02 = newVal + "02";
this.msg03 = newVal + "03";
}
*/
//对象形式
msg:{
handler:function(newVal,oldVal){
this.msg01 = newVal + "01";
this.msg02 = newVal + "02";
this.msg03 = newVal + "03";
console.log(newVal,oldVal);
},
//立即执行
immediate:true,
},
info:{
// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
handler:function(newVal,oldVal){
console.log("监听整个对象");
console.log(newVal.a,oldVal.a);
},
//深度监听，不加的话，a变化，handler不会执行
deep:true,
},
"info.a":{
// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是不一样的
handler:function(newVal,oldVal){
console.log("监听对象中的某个值");
console.log(newVal,oldVal);
},
}
},
})
</script>
</body>
</html>
效果截图
上一篇： 限量4160台 联想Z5s朱一龙定制版将亮相CES
下一篇： shell语法和写脚本练习