vue watch属性的使用
vue实例中提供了一个watch属性,用于监听vue实例中的属性的变化。
watch对应了一个对象,键是观察的属性,值是对应的回调函数。
基本使用
var vm = new Vue({
el: '#app',
data: {
money: 100,
}
watch: {
//监听属性中的属性名 就是 我们要监听data中的属性的属性名。
//第一个参数:当前值
//第二个参数:上一次的值
money: function(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
});
表单校验效果
// watch: 监视数据的变化
watch: {
// 监视msg,只要msg属性的值发生改变,function就会执行
// value: 当前值 oldValue:上一次的值
msg: function(value) {
if (value.length >=3 && value.length <= 6) {
this.tips = '正确'
} else {
this.tips = '密码格式不正确'
}
}
}
监视对象
监视对象的时候,需要加上deep: true
为了发现对象内部值的变化,可以在选项参数中指定 deep: true
如果是一个对象,无法监听到对象内部值的变化
var vm = new Vue({
el: '#app',
data: {
girlFriend: {
money: 100,
love: '你'
}
}
watch: {
girlFriend: function(newValue, oldValue) {
console.log(newValue, oldValue);
}
}
});
需要加上deep
data: {
girlFriend: {
money: 100,
love: '你'
}
},
watch: {
girlFriend: {
deep: true,
handler: function(newValue, oldValue) {
//注意:如果监听的是对象,新值与旧值都是相同的,因为指向了同一个对象。
//https://cn.vuejs.org/v2/api/#vm-watch
console.log(newValue, oldValue);
}
}
}
监视对象里面的某一个属性
watch: {
'queryData.name': {
handler: function() {
//do something
},
}
}
//简写
watch: {
'demo.part'(newValue, old) {
console.log(newValue, old)
}
},
immediate 属性,立马进行监听
watch: {
user: {
deep: true,
immediate:true,
handler: function(newValue, oldValue) {
console.log(newValue, oldValue);
}
}
}