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

古城微笑少年丶 2022-09-09 10:55 215阅读 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 条评论，215人围观）

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

相关阅读

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

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

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

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

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

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

相关 vue 属性 watch

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

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

相关 Vue - watch监听对象变化

1. 监听非对象的属性监听props-msg和data，分别是String和Number属性；可以正常监听到变化 // Parent <te

蔚落/ 2022年12月23日 03:53/ 0 赞/ 250 阅读

相关 vue监听和深度监听watch

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

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

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

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

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

相关 Vue使用watch监听一个对象中的属性

问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发响应的办法：比如 queryData: { name:

怼烎@/ 2022年10月13日 12:58/ 0 赞/ 191 阅读

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

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

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

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

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

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

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

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

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