uni-app watch事件监听三种用法

Posted 张志翔ۤ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app watch事件监听三种用法相关的知识,希望对你有一定的参考价值。

1、普通监听(无法监听到第一次绑定的变化)

<input type="text" v-model="userName"/>  
//监听   当userName值发生变化时触发
watch: {
    userName (newName, oldName) {
        console.log(newName)
    }
}

2、普通监听(可监听到第一次绑定的变化)

第一种方式有一个缺点 就是当值第一次绑定的时候 不会执行监听函数,,只有当值改变的时候 才会执行,如果想在第一次绑定的时候执行此监听函数,则需要设置 immediate为true,代码如下:

<input type="text" v-model="userName"/>  
watch: {
    userName: {
        handler (newName, oldName) {
            console.log(newName)
        },
        immediate: true
    }
}

3、深度监听(可监听对象内属性变化)

<input type="text" v-model="cityName.name" />
data (){
    return {
        cityName: {name:'北京'}
    }
},
watch: {
    cityName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true
    }
}

到此 uni-app watch事件监听三种用法介绍完成。

以上是关于uni-app watch事件监听三种用法的主要内容,如果未能解决你的问题,请参考以下文章

uni-app计算属性(computed)、方法(methods)、监听(watch)

watch监听器的基本使用

vue中watch的详细用法

vue中watch的详细用法

vue中watch的详细用法

uni-app(3)