vue獲取data數(shù)據(jù)改變前后的值方法
場景：購物車增加商品數(shù)量同時(shí)更新bridge標(biāo)志上的總商品個(gè)數(shù)，如果只是加上當(dāng)前變化后的數(shù)量的話則之前原有的數(shù)量會(huì)被重新添加一遍造成計(jì)算錯(cuò)誤。因此要減去變化前的數(shù)量才能得到添加的數(shù)量。
方法一： 直接watch監(jiān)聽data的數(shù)據(jù)
watch: {
a (now,old) {
console.log(now,old)
}
}
old為舊的值now為更新后的值
方法二：自定義指令
通過自定義指令將更新前的值綁定到對應(yīng)自定義指令的元素的dataset上然后在vue文件里面通過ref獲取到元素來獲取舊的值
自定義指令就不多說了前面有寫過以前相關(guān)的博客了這里直接上代碼
自定義指令要新建一個(gè)js文件并引入vue源碼包
import Vue from 'vue'
/*自定義指令*/
/*el所綁定的對象，binding指令上的參數(shù)*/
Vue.directive('n',{
/*插入數(shù)據(jù)時(shí)觸發(fā)*/
inserted: function (el,binding) {
console.log('插入',binding,el)
el.innerHTML = binding.value
},
update: function (el,binding) {
console.log('更新參數(shù)',binding)
el.dataset.oldNum = binding.oldValue
el.innerHTML = binding.value
},
bind:function (el,binding) {
console.log('綁定參數(shù)',binding)
el.innerHTML = binding.value
}
})
.vue文件中使用
import n from '../assets/n'
<div ref="div" v-n="a"></div>
<button @click="inc">增加</button>
inc () {
this.a++
var that = this
setTimeout(function () {
console.log(that.$refs.div.dataset.oldNum)
},1)
}
這里的inc是為了更新數(shù)據(jù)的操作，其中為什么要設(shè)個(gè)定時(shí)器呢？
因?yàn)橄雀淖儏?shù)然后才去觸發(fā)v-n指令如果不加定時(shí)器得到的數(shù)據(jù)是上上次更新的數(shù)據(jù)
對比兩種方法，明顯是watch比較方便但是自定義指令，也是個(gè)不錯(cuò)的東西學(xué)習(xí)一下可能以后其他地方會(huì)用到
以上這篇vue獲取data數(shù)據(jù)改變前后的值方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
element?el-tooltip實(shí)現(xiàn)自定義修改樣式
本文主要介紹了element?el-tooltip實(shí)現(xiàn)自定義修改樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟
這篇文章主要介紹了使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue3關(guān)于RouterView插槽和過渡動(dòng)效
這篇文章主要介紹了vue3關(guān)于RouterView插槽和過渡動(dòng)效,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐
本文主要介紹了avue實(shí)現(xiàn)自定義搜索欄及清空搜索事件的實(shí)踐，主要包括對搜索欄進(jìn)行自定義，并通過按鈕實(shí)現(xiàn)折疊搜索欄效果，具有一定的參考價(jià)值，感興趣的可以了解一下2021-12-12
這篇文章主要介紹了詳解VUE單頁應(yīng)用骨架屏方案，詳細(xì)的介紹了什么是骨架屏以及是憲法方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue文件樹組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03