【Vue.js】watch监听属性
姜鹏程
Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、 焦点事件、 鼠 标事件等触发条件来触发，但是不能自动监听当前Vue实例对象的状态变化。为了解决上述问题Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中的数据变化，就会调 用当前数据所绑定的事件处理方法。
<head>
<meta charset="utf-8">
<title></title>
<!--引入Vue.js核心文件-->
<script src="vue.js"></script>
</head>
<body>
<!--进行千米与米之间的换算-->
<div id="app">
千米:<input type="text"v-model="kilometers">
米:<input type="text"v-model="meters">
<!--使用v-model进行双向数据绑定,v-model指令主要用于实现表单元素和数据的双向绑定-->
</div>
<p id="info"></p>
<script>
var app=new Vue({
el:"#app",
data:{
//通过data数据选项定义了kilometers和meters数据
kilometers:0,
meters:0,
//data属性中,kilometers和meters初始值都为0。watch对象创建了data对象的两个监控方法:kilometers和meters
//当我们在输入框输入数据时,watch会实时监听数据变化并改变自身的值
},
//watch可以对一个属性或者对象进行监听并作出处理
//通过watch选项定义了监听器,监听数据变化,同时绑定了事件处理方法
watch : {
//监听kilometers数据
kilometers:function(val) {
this.kilometers=val;
this.meters=this.kilometers*1000
},
//监听meters数据
meters:function(val){
this.meters=val;
this.kilometers=val/1000;
},
},
//只要属性值发生变化,其都会触发执行回调函数来执行一系列操作;watch可以实现异步;watch里面的函数可以不写返回值
});
//$watch是Vue.js的API提供的一个方法，用来监听变量的数据变化
app.$watch("kilometers", function (newVal, oldVal) {
// 这个回调将在 app.kilometers 改变后调用
document.getElementById("info").innerHTML="修改前:"+oldVal+",修改后:"+newVal;
//在输入框输入数据时,会显示对应的数据
});
</script>
</body>
</html>上述代码中，通过data数据选项定义了kilometers和meters数据，并使用v-model进行了双向数据绑定。通过watch选项定义了监听器，监听当前Vue实例中kilometers和meters数据的变化，同时绑定了事件处理方法。
类似资料：