<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<button @click="clickHandler">修改</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return{
msg:"alex",
age:18,
}
},
methods:{
clickHandler(){
this.msg="wusir" // 当msg的数据属性 发生改变,下面的watch就会立马监听**
}
},
watch:{ //watch是监听单个属性, 是单个单个的监听,如果监听多个属性就要声明多个属性
//watch 监听msg属性
//function函数里面要有返回值
"msg":function(value){
//监听到数据之后,可以在这个地方做任何操作*****
console.log(value);
if (value === "wusir"){
alert(1);
this.msg = "大wusir"}//修改后内容
},
"age":function(value){}//监听age属性
}// watch对应的对象,可以监听多个属性,比如监听msg
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/kenD/p/10043346.html
时间： 2024-09-29 09:01:47