监听器
在watch选项中定义，包含2个参数，监听数据的新值，第二个是旧值
监听器的使用
<div id="app">
时：<input type="text" v-model="time">
分钟：<input type="text" v-model="minute"/>
</div>
<script>
const vm = Vue.createApp({
data(){
return{
time:0,
minute:0
}
},
watch:{
time(val){ this.minute = val * 60},
minute(val,oldVal){ this.time = val / 60; }
}
}).mount('#app')
</script>不要使用箭头函数定义监听函数
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
千米 : <input type="text" v-model="kilometers">
米: <input type="text" v-model="meters">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data(){
return {
kilometers:0,
meters:0
}
},
// 监听器
watch:{
// 当数据属性 kilometers 变化时 另一个数据属性会自动发生改变
kilometers(val){
this.meters = val * 1000;
},
// 监听器函数也可以接收2个参数 val是当前值 oldVal 是改变之前的值
meters(val, oldVal){
this.kilometers = val / 1000;
}
}
}).mount("#app");
</script>
</body>
</html>