vue watch如何同時監聽多個屬性

第一種方法

data () {return {name1: '',name2: '',age: ''}},watch: {'name1': function (val) {if (this.name1 === this.name2) {this.$set(this,'age',1)} else {this.$set(this,'age',null)}},'name2': function (val) {if (this.name1 === this.name2) {this.$set(this,'age',1)} else {this.$set(this,'age',null)}}}

這個方法就是分開下來單獨監聽每個屬性，只要name1或name2改變了，都會執行相應的方法，但是這樣寫的話重復的代碼很多，這顯然是不想看見的

第二種方法

data () {return {name1: '',name2: '',age: ''}}, computed: {listenChange () {const {name1,name2} = thisreturn {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)}}}

如果不能直接監聽多個屬性的話，我們可以換個想法，先將多個屬性放在一個對象中，直接監聽這個對象就可以了，這時候返回的val將會打印出你輸入的name1，name2的內容，可以同時監聽到這兩個屬性

總結

以上是生活随笔為你收集整理的Vue watch如何同时监听多个属性？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。