vue watch如何同时监听多个属性

古城微笑少年丶 2022-09-09 10:55 234阅读 0赞

使用计算属性computed，监听计算属性

data () { 
          return { 
          		name1: '',
          		name2: '',
          		age: ''
          }
     },
    computed: { 
          listenChange () { 
            const { name1,name2} = this
            return { name1,name2}
          }
        },
        
        watch: { 
          listenChange (val) { 
          		console.log('listenChange :', val)
          		if (val.name1 === val.name2) { 
                this.$set(this,'age',1)
            	 } else { 
                	this.$set(this,'age',null)
              	}
          }
        }

深度监听

data () { 
          return { 
          		name1: '',
          		name2: '',
          		age: ''
          }
     },
    computed: { 
          listenChange () { 
            const { name1,name2} = this
            return { name1,name2}
          }
        },
        
        watch: { 
        	listenChang: { 
          		handler(newVal,oldVal) { 
            		if (val.name1 === val.name2) { 
              		this.$set(this,'age',1)
            		} else { 
              			this.$set(this,'age',null)
            		}
          		},
          		immediate: true,
          		deep: true
        	}
        }

发表评论取消回复

表情：

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

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

相关阅读

相关 vue 深度监听watch（如何watch监听一个对象内部的变化）

. 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 2. 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能...

布满荆棘的人生/ 2024年04月19日 13:08/ 0 赞/ 100 阅读

相关 vue中的watch监听属性，使用详细（vue2和vue3监听属性watch的使用）

简述：vue中的watch属性大家都比熟悉，是vue的监听属性，监听数据的变化触发执行函数，可以监听数据和路由，这里给大家总结了一下watch在vue2和vue3中的使用详细

快来打我*/ 2023年10月04日 23:39/ 0 赞/ 61 阅读

相关 vue监听属性 watch的使用总结

目录 1.作用 2.应用场景 3.用法： 4.深度监听和立即执行（监听复杂类型） 5.总结： -------------------- 1.作用 ----

青旅半醒/ 2023年10月03日 10:49/ 0 赞/ 18 阅读

相关 vue watch监听多个数据

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

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

相关 vue 属性 watch

<body> <div id="app"> <div> <span>名：</span> <span>

朱雀/ 2023年01月07日 08:52/ 0 赞/ 181 阅读

相关 vue监听和深度监听watch

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

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

相关 uni-app watch同时监听多个数据

所有的数据来源于data中 computed:{ rotateSliders(){ const { rotateSlider, sta

骑猪看日落/ 2022年12月03日 09:54/ 0 赞/ 202 阅读

相关 vue watch如何同时监听多个属性

使用计算属性computed，监听计算属性 data () { return { name1: '',

古城微笑少年丶/ 2022年09月09日 10:55/ 0 赞/ 235 阅读

相关 vue watch属性的简单使用，watch监听对象变化

代码中监听了一个简单的属性currentPage和一个对象selectForm,只要它们的值一改变就会触发其中的逻辑函数或者异步请求 watch: {

浅浅的花香味﹌/ 2022年04月08日 08:42/ 0 赞/ 408 阅读

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

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

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