vue的监听函数watch()的用法
最近接到一个bug,要求:手机号和密码不输入的情况下,登录按键是灰色的,不可点击;手机号和密码输入的情况下,登录按键是亮色的,可以点击;细想一下用vue的监听函数watch()去解决watch: {//tel 是data() 里面的数据tel,newVal是tel变化后的值,oldVal是tel变化前的值tel(newVal...
·
最近接到一个bug,要求:手机号和密码不输入的情况下,登录按键是灰色的,不可点击;手机号和密码输入的情况下,登录按键是亮色的,可以点击;细想一下用vue的监听函数watch()去解决
watch: {
//tel 是data() 里面的数据tel,newVal是tel变化后的值,oldVal是tel变化前的值
tel(newVal,oldVal){
console.log(newVal,oldVal)
if(newVal != ""){
this.isDisabled = false
}else{
this.isDisabled = true
}
}
},
watch: {
//tel 是data() 里面的数据tel,newVal是tel变化后的值,oldVal是tel变化前的值
tel: {
handler(newVal, oldVal) {
console.log(newVal,oldVal)
if(newVal != ""){
this.isDisabled = false
}else{
this.isDisabled = true
}
},
// deep属性对对象进行深度监听
deep: true,
// 这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值 发生改变才会执行。
// 如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
immediate: true
}
},
更多推荐
已为社区贡献11条内容
所有评论(0)