vue 数组和对象更新检测

news/2024/11/16 16:33:31/文章来源:https://www.cnblogs.com/yansunda/p/18367278
vue如果要更新v-for渲染出来的数据,它是不会操作dom元素的。
而是就地更新需要操作的元素,并且确保它们在每个索引位置正确渲染。
为了给vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有的元素,你需要为每项
提供一个唯一Key attribute;
<div v-for="(item,index) in items" v-bind:key="item.id">
由于JavaScript的限制,vue不能检测数组的变动,如下:
1、当你利用所以直接设置一个数组项时,例如:vm.items[indexOFItem] = newValue
2、当你修改数组长度时,例如:vm.item.lenth = newLength
以上两种情况并没有双向数据绑定。
vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,这些被包裹的方法包括:
push pop shift unshift splice sort reverse
我们可以使用上述的方法实现数组的操作。
例如:splice可以实现数组的修改和删除,例如:vm.goodsList.splice(2,1,'huawei')可以实现将数组下标为2的元素更改为huawei

 同理,我们的对象也不能直接通过赋值进行双向数据绑定。

需要通过Vue.set(object,propertyName,value)来进行设置

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/783800.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

易优CMS插件route.php路由配置

插件route.php路由配置 只针对网站前台进行路由配置,全面支持TP5.0.10本身的路由规则扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开…

定位遇阻?合宙模组GNSS排障宝典01

使用合宙GNSS定位模组时,总有客户因为各种原因遇到无法定位的情况。本文总结了无法定位最常见的四种情况,希望能帮到有类似定位应用项目的朋友们,更快地排查出问题所在。使用合宙GNSS定位模组时,总有客户因为各种原因遇到无法定位的情况。 本文总结了无法定位最常见的四种情…

python入门教程(非常详细!3w+ 文字)

先序: 学习编程语言要先学个轮廓,刚开始只用学核心的部分,一些细节、不常用的内容先放着,现用现查即可;把常用的东西弄熟练了在慢慢补充。 1、 安装 Python 解释器 为什么需要安装 Python Python 语言本身是由解释器执行的,因此你需要在你的计算机上安装 Python 解释器。这…

cnetos 9 安装巨坑!!! ssh无法登录

不管任何软件登录 或任何形式的ssh登录 仅开启了密钥的登录 没有账号密码具体步骤:找到合适的插入位置:在 /etc/ssh/sshd_config 文件中查找类似以下的段落,然后在附近添加新配置:# Authentication: #PermitRootLogin prohibit-password #PasswordAuthentication no添加或修…

汉明距离(Hamming distance)

在图像信号处理中,汉明距离(Hamming distance)通常用于比较两个图像之间的差异程度。汉明距离原本是衡量两个等长字符串之间对应位置上不同字符的数量,但在图像处理中,它也可以用来比较两个图像的像素值差异。计算步骤 1、图像预处理:确保两个图像的尺寸相同,如果不同,…

遇到403 Forbidden ,服务器端查询后结果是http get查询字符串中包含非法字符

原文链接:https://blog.csdn.net/mm_hello11/article/details/84261672 报错解释: HTTP GET请求通过查询字符串(即URL中"?"后面的部分)传递参数。如果查询字符串包含非法字符,服务器可能会拒绝请求并返回错误,因为这些非法字符可能会破坏URL的格式或者服务器…

MAC (Multiply-Accumulate)

MAC (Multiply-Accumulate)

Xfce漫游(1) - Xfce与相关概念

用了好几年Xfce桌面了,但是从来没有仔细研究过Xfce底下相关的运行逻辑,最近才对相关的底层概念感兴趣并去尝试了解了一下,但是它的体系架构以及复杂的依赖关系令初来乍到者望而却步。没办法,写点什么方便理解吧。 这一系列文章主要是探讨Xfce底层实现的,不会过多聚焦于美化…

windows10清理缓存命令,windows10清理缓存命令是什么

在Windows 10系统中,清除缓存可以通过多种方法实现,但严格来说,并没有一个单一的“指令”可以一键清除所有类型的缓存。不过,我可以为你介绍几种常用的方法来清除不同类型的缓存。 一、使用磁盘清理工具 磁盘清理工具是Windows 10内置的一个非常实用的工具,可以帮助用户删…

问题:ETL中写入数据到Clickhouse抛出 Code: 27. DB::ParsingException: Cannot parse input

问题描述 问题:ETL中写入数据到Clickhouse抛出 Code: 27. DB::ParsingException: Cannot parse input 问题原因: 目标字段的长度和精度不足以容纳源字段 问题解决方法:案例1: 源是timestamp,目标是datetime修改结果: 创建目标表的时候选择高精度的字段类型案例2: 源是带…

CSS3第三天(盒子模型+浮动)

盒子模型 1.内边距padding 指定了高宽,再指定内边距,则会撑开盒子。 盒子未指定高宽(继承算未指定),则不会撑开盒子。 2.外边距margin 用于控制盒子之间的距离。同padding的简写方式。 margin-left左外边距 right top bottom 块级盒子水平居中,需满足两个条件:①盒子必须…

定位

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。 平铺 定位可以让盒子自由的在某个盒子内移动或者固定屏幕中某个位子,并且可以压住其他盒子。 叠积 定位:定位模式(position属性)+偏移量 position属性:static、relative、absolute、fixed top、botto…