vue获取data数据改变前后的值方法


Posted in Javascript onNovember 07, 2019

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

方法一: 直接watch监听data的数据

watch: {
a (now,old) {
console.log(now,old)
}
}

old为旧的值now为更新后的值

方法二:自定义指令

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

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

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

import Vue from 'vue'
/*自定义指令*/
/*el所绑定的对象,binding指令上的参数*/
Vue.directive('n',{
  /*插入数据时触发*/
  inserted: function (el,binding) {
    console.log('插入',binding,el)
    el.innerHTML = binding.value
  },
  update: function (el,binding) {
    console.log('更新参数',binding)
    el.dataset.oldNum = binding.oldValue
    el.innerHTML = binding.value
  },
  bind:function (el,binding) {
    console.log('绑定参数',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是为了更新数据的操作,其中为什么要设个定时器呢?

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

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

以上这篇vue获取data数据改变前后的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 #Javascript
vue.js循环radio的实例
Nov 07 #Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 #Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
Yii2如何批量添加数据
2016/05/17 PHP
简单的自定义php模板引擎
2016/08/26 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python之消除前缀重命名的方法
2018/10/21 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
卫校中专生个人自我评价
2013/09/19 职场文书
法律专业实习鉴定
2013/12/22 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
青年文明号汇报材料
2014/12/23 职场文书
美容院管理规章制度
2015/08/05 职场文书