Vue从入门到实战：监听器的更多形式
来自CloudWiki
监听器在定义时，除了直接写一个函数外，还可以接一个方法名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监听器</title>
</head>
<body>
<div id = "app">
年龄: <input type = "text" v-model="age">
<p v-if="info">{{info}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
age: 0,
info: ''
},
methods: {
checkAge(){
if(this.age >= 18)
this.info = '已成年';
else
this.info = '未成年';
}
},
watch : {
age: 'checkAge'
}
});
</script>
</body>
</html>
监听器还可以监听一个对象的属性变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>监听器</title>
</head>
<body>
<div id = "app">
年龄: <input type = "text" v-model="person.age">
<p v-if="info">{{info}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
person: {
name: 'lisi',
age: 0
},
info: ''
},
watch : {
// 该回调会在person对象的属性改变时被调用，无论该属性被嵌套多深
person: {
handler: function(val, oldVal){
if(val.age >= 18)
this.info = '已成年';
else
this.info = '未成年';
},
deep: true,//无论该对象的属性层级有多深,只要值发生变化了,都会被监测到.
immediate: true//让监听器函数在监听开始后立即执行
}
}
});
</script>
</body>
</html>
注：
deep: true,//无论该对象的属性层级有多深,只要值发生变化了,都会被监测到.
immediate: true//让监听器函数在监听开始后立即执行
