watch事件监听三种用法和监听多个值

青旅半醒 2022-09-04 00:44 367阅读 0赞

第一种 普通监听

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

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

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

第三种深度监听 当要监听对象或数组的时候需要添加deep:true属性

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

监听多个值

computed: {
        dateRange() {
          let {wd, sd, cgq, jzc, learn, tb, lccg, zglc, zdlc, kt, cfj, bgd} = this
          return {wd, sd, cgq, jzc, learn, tb, lccg, zglc, zdlc, kt, cfj, bgd}
        }
    },
    watch: {
      dateRange: {
        handler(vul) {
         console.log(vul)
        },
        // immediate: true,
        deep: true
      }
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue watch监听多个数据

项目驱动在自己工作的某个项目中，之前基本都是使用watch监听单个数据。但是后面在一个echarts的项目中，使用了三个echarts图表，而三个图表需要根据用户

桃扇骨/ 2023年09月23日 22:41/ 0 赞/ 2 阅读

相关 vue监听和深度监听watch

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-m

向右看齐/ 2022年12月11日 06:29/ 0 赞/ 188 阅读

相关 Watch 监听

第一种普通监听 <input type="text" v-model="userName"/> data (){ return {

快来打我*/ 2022年12月05日 00:58/ 0 赞/ 216 阅读

相关 thinkphp6事件监听和触发多个事件

thinkphp6事件订阅，监听多个事件创建一个事件类创建一个监听类修改配置文件确定触发事件创建一个事件类

川长思鸟来/ 2022年10月23日 06:00/ 0 赞/ 248 阅读

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

1、普通监听（无法监听到第一次绑定的变化） <input type="text" v-model="userName"/> //监听当userNam

秒速五厘米/ 2022年10月18日 11:24/ 0 赞/ 366 阅读

相关 watch事件监听三种用法和监听多个值

第一种普通监听 <input type="text" v-model="userName"/> //监听当userName值发生变化时触发

青旅半醒/ 2022年09月04日 00:44/ 0 赞/ 368 阅读

相关 vue computed计算属性和watch监听事件

参考一： 1、计算属性适用的情形我们可能会有这样的需求，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。例如在下面这个

以你之姓@/ 2022年01月31日 05:25/ 0 赞/ 389 阅读

相关 watch监听

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+攻爆jí腚メ/ 2021年09月17日 10:42/ 0 赞/ 403 阅读

相关 watch监听中立即监听和深度监听

wacth通常用来监听数据的变化如下代码，默认是被监听数据变化时执行，其中handler默认情况下不用写，下图是需要这个监听立即被执行，就是首次进来没变化的时候就执行设置属

谁践踏了优雅/ 2021年08月13日 18:23/ 0 赞/ 515 阅读

相关 Angular 事件监听$scope.$watch

监听服务$watch 1、不需要在控制器脚本中注入,直接使用 2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数

朴灿烈づ我的快乐病毒、/ 2021年07月25日 02:43/ 0 赞/ 652 阅读