17_侦听器（watch）
2018-02-08 本文已影响0人
CHENPEIHUANG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
<p>{{newMsg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello"
},
computed:{
newMsg(){
console.log("计算属性被调用。。。")
return this.msg.toUpperCase()
}
},
watch:{
msg:function(newVal,oldVal){
console.log("watch被调用。。。")
console.log(newVal)
console.log(oldVal)
}
}
})
//计算属性本质上是依赖watcher,只要对应的watcher被调用，则该计算属性的方法才会被调用
</script>
</body>
</html>
