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

2024-07-29 02:30:18

场景：购物车增加商品数量同时更新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数据改变前后的值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue 解决computed修改data数据的问题

最近在做项目的时候遇见一个问题,computed修改data数据的时候会报错.报错的大概意思是,不可以修改data数据的属性值.查了一些答案,最终解决办法是需要用到set和get.看代码: data () { return { fold: false } } 我想修改fold的值,如果不用get和set就会报错!!! computed:{ listShow: { get: function () { if (!this.totalCount) { return false } return th
解决vue接口数据赋值给data没有反应的问题

问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re
改变vue请求过来的数据中的某一项值的方法(详解)

由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&
vue 修改 data 数据问题并实时显示的方法

首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值页面初
vue 中自定义指令改变data中的值

通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e
vue获取data数据改变前后的值方法

场景:购物车增加商品数量同时更新bridge标志上的总商品个数,如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误.因此要减去变化前的数量才能得到添加的数量. 方法一: 直接watch监听data的数据 watch: { a (now,old) { console.log(now,old) } } old为旧的值now为更新后的值方法二:自定义指令通过自定义指令将更新前的值绑定到对应自定义指令的元素的dataset上然后在vue文件里面通过ref获取到元素来获取旧的
vue 修改 data 数据问题并实时显示操作

首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 补充知识:vue data中数组以及对象属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测的机制又很明确的说明: 变异方法:Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新. 这些方法如下: push() pop() shift() unshift() splice() sort() rever
vue异步axios获取的数据渲染到页面的方法

我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001
vue 获取到数据但却渲染不到页面上的解决方法

能获取到数据数据却渲染不到页面上问题描述: 我数据全部拿到了,js 里面写 console.log( musics ) 数据打印出来都正确,但是页面里面就是不显示. 很多时候对数据进行处理了,但是页面上就是没变化,没效果,用 console.log 打印数据都没问题,特别是数组.对象容易出现这个问题: 1. this.$set( xxx ) 保存变量 2.this.$forceUpdate( xxx ) 强制更新,迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不
vue监听input标签的value值方法

由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/
Vue获取DOM元素并修改属性的方法

Vue获取DOM元素 Vue获取DOM元素有两种方法直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改属性或者样式使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(
html中通过JS获取JSON数据并加载的方法

在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护.因此,在视频专题页面,需要展示多列视频数据,我选择了用json. HTML如下(只展示重点部分,需要引用JQ) <div class="container-fluid content "> <div class="container neirong"> <div class="left fl"> <div class=
layer页面跳转,获取html子节点元素的值方法

1.jsp页面,携带值跳转到新页 original.jsp var btnClick = {'click .shownewPage':function (e, value, row, index) {//点击按钮时触发时间 var Id = row.Id; layer.open({ title: '跳转到新页', type: 2, content: '/switch/switchAction!getNewPage.do?Id='+Id, //struts配置文件指定的跳转路径 area: ['9
vue 获取url里参数的两种方法小结

我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query.passport; 第二种: var query=this.$route.query; let lat = query.lat; 补充知识:Vue通过query获取路由参数现在来讲Vue通过query获取路由参数可以看见com1组件里的路由参数为 name=zhangsan&job=teache

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

相关推荐

随机推荐