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

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

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、對(duì)象的watch

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

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

 4、對(duì)象具體屬性的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)聽(tīng)數(shù)組或?qū)ο蟮奈恼戮徒榻B到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue echarts封裝組件需求分析與實(shí)現(xiàn)

    Vue echarts封裝組件需求分析與實(shí)現(xiàn)

    在平常的項(xiàng)目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動(dòng)態(tài)的進(jìn)行呈現(xiàn),接下來(lái)我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法，這篇文章主要介紹了Vue echarts封裝組件需求分析與實(shí)現(xiàn)
    2022-10-10
  • 淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別

    淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別

    本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • Vue3+Tsx給路由加切換動(dòng)畫(huà)時(shí)的踩坑及解決

    Vue3+Tsx給路由加切換動(dòng)畫(huà)時(shí)的踩坑及解決

    這篇文章主要介紹了Vue3+Tsx給路由加切換動(dòng)畫(huà)時(shí)的踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • Vue keepAlive頁(yè)面強(qiáng)制刷新方式

    Vue keepAlive頁(yè)面強(qiáng)制刷新方式

    這篇文章主要介紹了Vue keepAlive頁(yè)面強(qiáng)制刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • Vee-Validate的使用方法詳解

    Vee-Validate的使用方法詳解

    本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • Vue之計(jì)算屬性詳解

    Vue之計(jì)算屬性詳解

    這篇文章主要為大家介紹了Vue的計(jì)算屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
    2021-11-11
  • vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)

    vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)

    關(guān)于vue項(xiàng)目中會(huì)出現(xiàn)一些需求,就是右鍵菜單項(xiàng)的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個(gè)右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例

    Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例

    這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-08-08
  • 手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法

    手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法

    本篇文章主要介紹了手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • Vue.js 和 MVVM 的注意事項(xiàng)

    Vue.js 和 MVVM 的注意事項(xiàng)

    MVVM 是Model-View-ViewModel 的縮寫(xiě)，它是一種基于前端開(kāi)發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫(kù)，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧
    2016-11-11

最新評(píng)論