vue watch深度監(jiān)聽對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果

更新時(shí)間：2018年08月16日 10:43:34 作者：琪思妙想

這篇文章主要介紹了vue watch深度監(jiān)聽對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

當(dāng)對(duì)象內(nèi)的某一個(gè)元素發(fā)生變化，判斷對(duì)象另一元素，并進(jìn)行賦值

<template>
　　<input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}
　　<input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}
</template>
<script>
　　data(){
　　　　retrun{
　　　　　　a:{
　　　　　　　　a1:{
　　　　　　　　　　a12:12
　　　　　　　　},
　　　　　　　　a2:{
　　　　　　　　　　a22:15
　　　　　　　　}
　　　　　　}
　　},
　　watch:{
　　　　a:{
　　　　　　handler(val.oldval){
　　　　　　　　if(val.a1.a12<val.a2.a22){
　　　　　　　　　　val.a2.a22=val.a1.a12;
　　　　　　　　}
　　　　　　},
　　　　　　deep:true
　　　　}
　　}
</script>

總結(jié)

以上所述是小編給大家介紹的vue watch深度監(jiān)聽對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

解決Vue編譯時(shí)寫在style中的路徑問(wèn)題
下面小編就為大家?guī)?lái)一篇解決Vue編譯時(shí)寫在style中的路徑問(wèn)題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無(wú)法加載頁(yè)面的問(wèn)題及解決
這篇文章主要介紹了vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無(wú)法加載頁(yè)面的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
本文給大家介紹如何使用electron將vue項(xiàng)目打包成.exe文件,大家要注意一下vue2項(xiàng)目,使用的vue-element-admin框架,用electron打包成.exe文件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-03-03
Vue2?的?diff?算法規(guī)則原理詳解
這篇文章主要介紹了Vue2的diff算法規(guī)則原理詳解，diff?算法，就是通過(guò)比對(duì)新舊兩個(gè)虛擬節(jié)點(diǎn)不一樣的地方，針對(duì)那些不一樣的地方進(jìn)行新增或更新或刪除操作。接下來(lái)我們?cè)敿?xì)介紹節(jié)點(diǎn)更新的過(guò)程
2022-06-06
如何使用?vxe-table?將行數(shù)據(jù)標(biāo)記為刪除狀態(tài)
vxe-table支持將數(shù)據(jù)標(biāo)記為待刪除狀態(tài),通過(guò)調(diào)用setPendingRow方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2025-01-01
vue實(shí)現(xiàn)頁(yè)面刷新動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面刷新動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
VUE中使用HTTP庫(kù)Axios方法詳解
本文將詳細(xì)介紹在VUE中使用HTTP庫(kù)Axios的詳細(xì)方法,需要的朋友可以參考下
2020-02-02
Vue.js在使用中的一些注意知識(shí)點(diǎn)
這篇文章主要給大家介紹了Vue.js在使用中的一些注意知識(shí)點(diǎn)，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問(wèn)題
vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實(shí)現(xiàn)單向數(shù)據(jù)流也可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問(wèn)題,需要的朋友可以參考下
2019-06-06
vue中回調(diào)函數(shù)(callback)的用法舉例
這篇文章主要給大家介紹了關(guān)于vue中回調(diào)函數(shù)(callback)的用法舉例,所謂的回調(diào)函數(shù),就是由調(diào)用函數(shù)提供執(zhí)行代碼,被調(diào)用函數(shù)執(zhí)行完畢之后,再自動(dòng)執(zhí)行的一個(gè)函數(shù),需要的朋友可以參考下
2023-08-08