良许Linux教程网 干货合集 vue数组双向绑定问题及$set用法详解

vue数组双向绑定问题及$set用法详解

这篇文章主要介绍了vue数组双向绑定问题及$set用法说明,具有很好的参考价值,希望大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

image-20221115203439077

vue数组双向绑定问题及$set用法

在vue开发中,我们有时会遇到数据更新视图不更新问题,地址没有改变,vue就监测不到数据变化。这个时候,双向绑定就失效了。

以下这几种情况,Vue都会检测不到数据的变化

当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

由于 JavaScript 的限制,Vue不能检测对象属性的添加或删除

数组实现响应式的七个方法

push() 可向数组的末尾添加一个或多个元素,并返回新的长度

pop() 从数组的尾部删除一个元素,返回删除的元素

unshift() 向数组的前面添加元素,返回值:数组的新长度

shift() 从数组头部删除一个元素,返回删除的元素

splice()

删除:两个参数,splice(index,num) 删除的第一项的位置以及要删除的项数

添加:三个参数,插入起始位置、删除的项数(为0)、插入的项,向指定位置插入任意数量的项。arr.splice(1,0,”or”,”ue”)

替换:先删除再添加,三个参数:起始位置、删除的项数、要添加的项数。添加的与删除的数量不一定要一致。arr.splice(1,2,”or”,”ue”)

sort() 对数组元素进行排序,默认根据字符串Unicode码进行排序,对数字进行排序时参数要传递一个比较函数。

    sortNumber(a,b){
          return a-b
    };

reverse() 该方法用于颠倒数组中元素的顺序

上面的方法把原数组更改掉,可以选用这些方法来实现响应式。

flter()、concat() 和 slice()。它们不会变更原始数组,而总是返回一个新数组。使用这些方法会造成数据双向绑定失效。

filter() 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() 用于连接两个或多个数组。该方法不会改变现有的数组.

slice() 可从已有的数组中返回选定的元素,选择从给定的 start 参数开始的元素,并在给定的 end 参数处结束,但不包括。该方法并不会修改数组,而是返回一个子数组.

$set用法

当数据没有被双向绑定的时候,我们可以使用$set

this.$set(原数组, 索引值, 需要赋的值)

vue中$set解决数据双向绑定

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

解决:用$set方法

当你修改数组的长度时,例如:vm.items.length = newLength

解决:vm.items.splice(newLength)

this.$set(Object, key, value)
//this.$set(this.list[i],"flag",true)

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程