watch 简单使用
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: { // watch 方法最初绑定的时候,它是不会执行的,只有变化了才会执行
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
watch: {
**// 声明一个handler,这样在初始化时就会执行一次 handler**
firstName: {
handler(val) {
this.fullName = val + ' ' + this.lastName
},
immediate: true
}
}
监听对象属性的变化
<div id="demo">{{ obj.a }}</div>
<input v-model="obj.a" />
var vm = new Vue({
el: '#demo',
data: {
obj: {
a: '123'
}
},
watch: {
obj: {
handler() {
console.log('obj.a changed');
},
immediate: true,
deep: true // 如果不加这一句,在输入框中输入值,并不会打印 obj.a changed
}
}
})
// 这样写就能监听到属性值的变化
watch: {
'obj.a': {
handler() {
console.log('obj.a changed');
}
}
}