vue如何获取数据数据改变前后的值

  介绍

这篇文章主要介绍了vue如何获取数据数据改变前后的值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

vue是什么

vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

<>强场景:强购物车增加商品数量同时更新桥标志上的总商品个数,如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误。因此要减去变化前的数量才能得到添加的数量。

<强>方法一:直接看监听数据的数据

看:,{   a (旧),{   console.log(旧)   }   }

为老旧的值现在为更新后的值

<强>方法二:自定义指令

通过自定义指令将更新前的值绑定到对应自定义指令的元素的数据集上然后在vue文件里面通过裁判获取到元素来获取旧的值

自定义指令就不多说了前面有写过以前相关的博客了这里直接上代码

<>强自定义指令要新建一个js文件并引入vue源码包

import  Vue 得到& # 39;vue # 39;/*自定义指令*//* el所绑定的对象,绑定指令上的参数*/Vue.directive (& # 39; n # 39;, {/*插才能入数据时触发*/,,插入:function  (el,绑定),{   ,,,console.log(& # 39;插入& # 39;,绑定,el)   ,,,el.innerHTML =binding.value   ,,},   更新:才能,function  (el,绑定),{   ,,,console.log(& # 39;更新参数& # 39;,绑定)   ,,,el.dataset.oldNum =binding.oldValue   ,,,el.innerHTML =binding.value   ,,},   绑定才能:function  (el,绑定),{   ,,,console.log(& # 39;绑定参数& # 39;,绑定)   ,,,el.innerHTML =binding.value   ,,}   })

<强>。vue文件中使用

, import  n 得到& # 39;. ./资产/n # 39;   & lt; div  ref=癲iv", v n=癮"祝辞& lt;/div>   & lt; button  @click=癷nc"祝辞增加& lt;/button>   inc  (), {   ,this.a + +   var 才能;that =,   setTimeout(才能function  (), {   ,,,console.log (refs.div.dataset.oldNum美元。)   ,,},1)   }

这里的公司是为了更新数据的操作,其中为什么要设个定时器呢?

因为先改变参数然后才去触发v n指令如果不加定时器得到的数据是上上次更新的数据

对比两种方法,明显是手表比较方便但是自定义指令,也是个不错的东西学习一下可能以后其他地方会用到

感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何获取数据数据改变前后的值”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

vue如何获取数据数据改变前后的值