亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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組件（全局，局部，動(dòng)態(tài)加載組件）

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

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

    vue3如何使用setup代替created

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

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

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

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

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

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

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

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

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

    如何在寶塔面板部署vue項(xiàng)目

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

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

    ECharts，縮寫(xiě)來(lái)自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上。本文將在Vue中整合Echarts實(shí)現(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)行混亂情況的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評(píng)論