<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监听</title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="myApp">
姓名:<input type="text" v-model="name" />
<br />
年龄:<input type="text" v-model="age"/>
<br />
<button @click="changeAge()">点击改变年龄</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#myApp",
data:{
name:"斌斌",
age:"18",
age2:"20"
},
//检测数据变化 如果要检测数据是否变化,使用watch
watch:{
//检测数据为data里的值,news最新值,old上一次的值
name:function(news,old){
console.log(news+"--------"+old);
},
age:function(news,old){
console.log(news+"--新数据--年龄变化--老数据--"+old);
}
},
methods:{
changeAge:function(){
this.age2++;
}
}
});
//绑定到实例上
vm.$watch("age2",function(news,old){
console.log(news+"年龄变化"+old);
})
</script>
</html>