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 multibox 全选
Mar 22 Javascript
javascript 禁止复制网页
Jun 11 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
js实现导航跟随效果
Nov 17 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
利用js实现简易红绿灯
Oct 15 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP制作用户注册系统
2015/10/23 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python类的用法实例浅析
2015/05/27 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python的文件操作方法汇总
2017/11/10 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
餐厅经理岗位职责范本
2014/02/17 职场文书
维修工先进事迹
2014/05/29 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
群众路线表态发言材料
2014/10/17 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
乱世佳人观后感
2015/06/08 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书