欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中用watch一次監(jiān)聽多個(gè)值變化的示例詳解

 更新時(shí)間：2024年01月04日 10:39:28   作者：小白探索世界歐耶！~  
在Vue中,watch 本身不能監(jiān)聽多個(gè)變量,但我們可以通過返回具有計(jì)算屬性的對(duì)象然后監(jiān)聽該對(duì)象,從而實(shí)現(xiàn)一次性“監(jiān)聽多個(gè)變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個(gè)值變化的示例,需要的朋友可以參考下

在Vue中，watch 本身不能監(jiān)聽多個(gè)變量。但我們可以通過返回具有計(jì)算屬性的對(duì)象然后監(jiān)聽該對(duì)象，從而實(shí)現(xiàn)一次性“監(jiān)聽多個(gè)變量”。

  • 在data中定義需要的屬性
  • 在computed中返回一個(gè)包含將被監(jiān)聽的的各個(gè)對(duì)象的計(jì)算屬性
  • 在watch中監(jiān)聽該計(jì)算屬性

舉個(gè)例子：

export default {
    data() {
        return {
            msg1:  "message1",
            msg2:  "message2"
        }
    },
    computed: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                //newVal和oldVal的值就是新舊msgObj的值，即msg1和msg2的值
		        //接下來在這里寫將要進(jìn)行的操作
 
                if (newVal.msg1 != oldVal.msg1) {
                    console.log( "msg1 is change!!!" )
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log( "msg2 is change!!!" )
                }
            },
            deep: true
        }
    }
}

這樣，我們就實(shí)現(xiàn)了再watch中一次性監(jiān)聽兩個(gè)值的變化。

想要一次性監(jiān)聽更多個(gè)值也可以這么操作。

以上就是Vue中用watch一次監(jiān)聽多個(gè)值變化的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue watch一次監(jiān)聽多個(gè)值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理

    vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理

    這篇文章主要介紹了vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決

    vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決

    這篇文章主要介紹了vue組件引用另一個(gè)組件出現(xiàn)組件不顯示的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • 詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成

    詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成

    數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個(gè)重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫(kù)進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下
    2023-06-06
  • 基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)

    基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)

    本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-12-12
  • 詳解iview的checkbox多選框全選時(shí)校驗(yàn)問題

    詳解iview的checkbox多選框全選時(shí)校驗(yàn)問題

    這篇文章主要介紹了詳解iview的checkbox多選框全選時(shí)校驗(yàn)問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-06-06
  • vue組件之全局注冊(cè)和局部注冊(cè)方式

    vue組件之全局注冊(cè)和局部注冊(cè)方式

    這篇文章主要介紹了vue組件之全局注冊(cè)和局部注冊(cè)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問題

    解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問題

    這篇文章主要介紹了解決vue項(xiàng)目路徑不正確,自動(dòng)跳轉(zhuǎn)404的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • Vue中this.$nextTick()的具體使用

    Vue中this.$nextTick()的具體使用

    本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-02-02
  • 前端必知必會(huì)之Vue?$emit()方法詳解

    前端必知必會(huì)之Vue?$emit()方法詳解

    這篇文章主要介紹了前端必知必會(huì)之Vue?$emit()方法的相關(guān)資料,Vue.js中的$emit()方法用于在子組件中創(chuàng)建自定義事件,并在父組件中捕獲這些事件,這在需要從子組件向父組件傳遞信息的大型項(xiàng)目中非常有用,需要的朋友可以參考下
    2025-02-02
  • vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換

    vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換

    這篇文章主要為大家詳細(xì)介紹了vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-06-06

最新評(píng)論