最近接到一个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
            }
        },

 

Logo

前往低代码交流专区

更多推荐