vue中修改data中数据的方法

vue 专栏收录该内容
26 篇文章 0 订阅

vue的data中保存一些数据,用于页面的渲染。有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新。

注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改。强制性通过js对数据修改的那些方法,有一部分在vue中是不被认可的。

vue中修改简单类型数据

简单类型的数据,包括number boolean bigInt string 等
修改这类型的数据,我们可以直接赋值,vue也能监听到数据发生的变化,然后作出修改。

xxxx表示变量名,yyyy则是要赋值的新值。

this.$data.xxxx = yyyy
或
this.xxxx = yyyy

vue中修改数组的方法:

一、变异方法(7个):push ,shift, unshift, pop, sort, splice, reverse
这些方法在与js基本一致(推荐)

push
此方法是在数组的后面添加新加元素,此方法改变了数组的长度
+++++++++++++++++++++++++++++++++++++++++++++++++++
pop
此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度
+++++++++++++++++++++++++++++++++++++++++++++++++++
shift
此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度
+++++++++++++++++++++++++++++++++++++++++++++++++++
unshift
此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度
+++++++++++++++++++++++++++++++++++++++++++++++++++
splice
Array.splice(开始位置, 删除的个数,替换的元素) 万能方法,可以实现增删改
+++++++++++++++++++++++++++++++++++++++++++++++++++
sort
该方法用于对数组进行排序
+++++++++++++++++++++++++++++++++++++++++++++++++++
reverse
该方法用于将数组的内容倒置
+++++++++++++++++++++++++++++++++++++++++++++++++++

二、set方法(推荐)
this. s e t 这 是 v u e 实 例 调 用 set 这是vue实例调用 setvueset()方法,专门用来修改数组的
第一个参数,已经存在data中的数据,要被修改的数组
第二个参数,要修改的数组下标
第三个参数,要修改的数组对应下标的值

this.$set (this.selectedarr, index, option)
data() {
	return {
		textArray: ["1","2","3"]
	}
}

修改最后一个为"4"
this.$set (this.textArray, 2, "4")

+++++++++++++++++++++++++++++++++++++++++++++++++++

三、用一个全新的数组替换原先的数组,而不是在原先数组上修改(不推荐)

data() {
	return {
		textArray: ["1","2","3"]
	}
}

修改最后一个为"4"
this.textArray = ["1","2","4"]

简单总结一下,这三种修改数组的方法,最后一种不推荐,因为这会引起vue中整个数组数据对应的页面重新渲染,而我们明明只想改变数组中的某一个元素。

vue中修改对象的方法:

一、方法直接改(如果对象数据过于复杂,层次很深的话,不推荐)

this.obj.dengxi = 'dengxi' 

二、使用vue的实例提供的方法进行操作(推荐,vue监听了这个方法,做到更好的更新渲染)

this.$set(vm.obj,'dengxi','dengxi好帅')

三、通过vue构造函数提供的方法来改变(推荐,这个其实和第二种方法一样)

Vue.set(this.obj,'dengxi','dengxi真的好帅')

关于删除
如果想要将对象中的某一个键值对应的value删掉
一、可以通过上面的三种方法,将其设置为空(推荐,粗暴简单,但有效)

this.obj.dengxi = null

二、vue实例提供的删除方法(推荐)

this.$delete(this.obj,'yangxi')

三、vue构造函数提供的方法(其实和第二种一样,推荐)

Vue.delete(this.obj,'dengxi')

四、创建一个新对象,覆盖之前的对象,vue仍能实现更新(不推荐)

this.obj = {....}

都看到这里了,求点赞,关注,评论,感谢各位大佬的支持,是我继续创作的动力。

在这里插入图片描述

  • 6
    点赞
  • 0
    评论
  • 22
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值