demo1:监听counter的变化
<div id="app">
<p style="font-size: 25px;">计数器:{{ counter }}</p>
<button @click="counter++" style="font-size: 25px;">点我</button>
</div>
const app = new Vue({
el:"#app",
data:{
counter:1
}
});
app.$watch('counter', function(nval,oval){
console.log('计数器值的变化为:' + oval + '变为' + nval +'!')
})
demo2:监听千米,米之间的转换
<div id="app">
千米:<input type="text" v-model = "kilometers">
米:<input type="text" v-model = "meters">
</div>
const vm = new Vue({
el:"#app",
data:{
kilometers:0,
meters:0
},
methods: {
},
computed: {
},
watch: {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters:function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
vm.$watch('kilometers', function(nval,oval){
console.log("修改前为:" + oval + "修改后为" + nval );
})
vm.$watch('meters', function(nval,oval){
console.log("修改前为:" + oval + "修改后为" + nval );
})
**
总结:
**
假设stopSimulationbuttonchild是boolean值,初始值为false
监听的数据格式: