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

 更新时间:2022年09月10日 10:38:48   作者:吃喽喽  
这篇文章主要介绍了vue数组双向绑定问题及$set用法说明,具有很好的参考价值,希望大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。 

相关文章

  • element?select必填项验证回显问题的解决

    element?select必填项验证回显问题的解决

    本文主要介绍了element?select必填项验证回显问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue组件props属性监听不到值变化问题

    vue组件props属性监听不到值变化问题

    这篇文章主要介绍了vue组件props属性监听不到值变化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3.0如何修改浏览器标题(静态)

    vue3.0如何修改浏览器标题(静态)

    这篇文章主要介绍了vue3.0如何修改浏览器标题(静态),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Backbone前端框架核心及源码解析

    Backbone前端框架核心及源码解析

    这篇文章主要为大家介绍了Backbone前端框架核心及源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 解决vue处理axios post请求传参的问题

    解决vue处理axios post请求传参的问题

    下面小编就为大家分享一篇解决vue处理axios post请求传参的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue项目无法删除的问题及解决

    vue项目无法删除的问题及解决

    这篇文章主要介绍了vue项目无法删除的问题及解决方案,具有很好的参考价值,希望对的大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue?插件及浏览器本地存储

    Vue?插件及浏览器本地存储

    这篇文章主要介绍了Vue?插件及浏览器本地存储,插件通常用来为Vue添加全局功能,包含install方法的一个对象。更多相关介绍,需要的小伙伴可以参考下面文章内容
    2022-05-05
  • VUE开发分布式医疗挂号系统后台管理页面步骤

    VUE开发分布式医疗挂号系统后台管理页面步骤

    本文从整体上介绍Vue框架的开发流程,结合具体的案例,使用Vue框架调用具体的后端接口,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • vue中component组件的props使用详解

    vue中component组件的props使用详解

    本篇文章主要介绍了vue中component组件的props使用详解,这里整理了详细的用法,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • 解析Vue 2.5的Diff算法

    解析Vue 2.5的Diff算法

    本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。updataChildren是Diff算法的核心,所以本文对updataChildren进行了图文的分析。下面通过本文给大家分享Vue 2.5的Diff算法,需要的朋友参考下吧
    2017-11-11

最新评论

?


http://www.vxiaotou.com