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

Vue使用watch監(jiān)聽數(shù)組或?qū)ο?/h1>
 更新時間：2022年06月26日 11:29:54   作者：小旭2021  
這篇文章介紹了Vue使用watch監(jiān)聽數(shù)組或?qū)ο蟮姆椒?，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1、普通的watch

data() {
    return {
        frontPoints: 0   
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}

2、數(shù)組的watch

data() {
    return {
        winChips: new Array(11).fill(0)  
    }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}

3、對象的watch

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}  
    }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

tips: 只要bet中的屬性發(fā)生變化（可被監(jiān)測到的），便會執(zhí)行handler函數(shù)；
如果想監(jiān)測具體的屬性變化，如pokerHistory變化時，才執(zhí)行handler函數(shù)，則可以利用計算屬性computed做中間層。
事例如下：

 4、對象具體屬性的watch［活用computed］

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}  
    }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

到此這篇關(guān)于Vue使用watch監(jiān)聽數(shù)組或?qū)ο蟮奈恼戮徒榻B到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue組件（全局，局部，動態(tài)加載組件）

    vue組件（全局，局部，動態(tài)加載組件）

    組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下
    2018-09-09
  • vue3如何使用setup代替created

    vue3如何使用setup代替created

    Vue3中的setup是一個新的生命周期函數(shù),它可以用來代替組件中的 data和一些生命周期函數(shù)（如created和beforeMount）,這篇文章主要介紹了vue3如何使用setup代替created的相關(guān)資料,需要的朋友可以參考下
    2023-09-09
  • vue實現(xiàn)單點登錄的方式匯總

    vue實現(xiàn)單點登錄的方式匯總

    最近項目停工了，RageFrame的學(xué)習(xí)暫時告一段落，這一篇給大家分享下有關(guān)單點登錄的相關(guān)知識，并提供一些demo給大家參考，對vue單點登錄的實現(xiàn)方式感興趣的朋友一起看看吧
    2021-11-11
  • vue如何使用AIlabel標(biāo)注組件

    vue如何使用AIlabel標(biāo)注組件

    這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue 中的 render 函數(shù)作用詳解

    vue 中的 render 函數(shù)作用詳解

    這篇文章主要介紹了vue 中的 render 函數(shù)作用，通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取

    vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取

    這篇文章主要介紹了vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • 如何在寶塔面板部署vue項目

    如何在寶塔面板部署vue項目

    這篇文章主要給大家介紹了關(guān)于如何在寶塔面板部署vue項目的相關(guān)資料,寶塔面板可以通過Nginx來部署Vue項目,并解決跨域問題,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • 一文詳解Vue如何整合Echarts實現(xiàn)可視化界面

    一文詳解Vue如何整合Echarts實現(xiàn)可視化界面

    ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動設(shè)備上。本文將在Vue中整合Echarts實現(xiàn)可視化界面，感興趣的可以了解一下
    2022-04-04
  • 深入理解vue-router之keep-alive

    深入理解vue-router之keep-alive

    本篇文章主要介紹了深入理解vue-router之keep-alive。keep-alive使被包含的組件保留狀態(tài)，或避免重新渲染，有興趣的可以了解一下
    2017-08-08
  • Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決

    Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決

    這篇文章主要介紹了Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論