vue之列表循环
文档:https://cn.vuejs.org/v2/guide/list.html
当 Vue.js 用
v-for
正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index"
意思就是,默认就是按照索引来“就地复用”html元素的,如以下代码
<div v-for="(item,index) in arr" :key="index">
等价于
<div v-for="(item,index) in arr">
对于“就地复用”这个现象,以下来重现一下:
测试代码
<template>
<div>
<div v-for="(item,index) in arr">
<input type="text">
<button @click="del(index)">删除</button>
</div>
<button @click="add">添加</button>
</div>
</template> <script>
export default {
name: "App",
data() {
return {
arr: [
"1",
"2",
"3",
]
}
},
methods: {
del(index) {
this.arr.splice(index, 1);
},
add() {
this.arr.push("");
}
}
}
</script>
往页面的输入框依次填入1~3:
然后点击第二个删除按钮,效果如下:
页面剩下1、2,这跟我们预期的剩下1、3不一样,原因就在于vue默认的“就地复用”原则。现象解释如下:
将以上三个输入框记为a,b,c。for循环默认的key为索引的话,则a对应0,b对应1,c对应2 。那当删了了第二个元素时,新数组的元素的索引分别为0和1,而重新渲染时,采用就地复用的话,复用到的dom元素就是a和b了,页面输入框就展示1和2了。这输入框中的1和2实际上就是代表了dom的状态,通过输入框的值,就能看出来,vue复用了哪个dom元素。这里说的,实际上就是对应了文档的第二段话:
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出
也就是说,当dom有状态的时候,最好就不要采用这种默认模式(key为索引),否则会导致状态混乱(如上面我们明明点击了第二个删除,而页面展示的效果却像点击了第三个删除的按钮一样)。
对于循环渲染有状态的dom元素,应该让key与数组元素一一对应起来,这样数组元素的删除,就完全等同于对应dom元素的删除了(换个角度解释以上的问题就是:点击删除的前后,索引1对应着相同的dom元素,而对应的数组元素却不一致,导致页面展示的结果让人困惑),解决办法如下:
<div v-for="(item,index) in arr" :key="item">
<input type="text">
<button @click="del(index)">删除</button>
</div>
让key与数组元素唯一对应起来即可,运行效果:点击第二个删除,界面上剩余1,3,符合我们预期结果。但是这样一来,vue就不会就地复用,性能会相对低一点了。
vue之列表循环的更多相关文章
- vue数据渲染、条件判断及列表循环
1.数据渲染 {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...
- Vue中的循环以及修改差值表达式
0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- 小程序:怎么在两层列表循环(wx:for)的时候判断是否为最后一个元素
问题说明: 如下图所示,在箭头所指的最后一个选项的底线与底部操作栏的上边线重叠,需要清除掉最后一个元素的底线: 想到的解决方案: 通过判断是否为最后一个元素,然后通过条件渲染(wx:if)动态添加对 ...
- vue---数据列表循环
使用vue进行数据循环是非常常见的操作,下面是用利用forEach和map来进行数据循环: 最常见的 forEach 循环: tbody.forEach((item,key) => { .... ...
- vue标签内循环数据逗号分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- shell脚本之for 列表循环
作用:对列表进行循环处理 语法: for var in list do commands done 案例: 1.读取列表中的值 2.读取列表中的复杂值 异常案例:未显示出“'”单引号,使语句出现异常 ...
随机推荐
- PAT甲级——1102 Invert a Binary Tree (层序遍历+中序遍历)
本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90577042 1102 Invert a Binary Tree ...
- Python-15-收集参数
允许用户提供任意数量的参数: def print_params(*params): print(params) >>> print_params('Testing') ('Tes ...
- struts2.5+框架使用通配符与动态方法
概述:struts2.5以后加强了安全性,下面就是安全配置引发的问题 通配符: 在学习struts框架时经常会使用到通配符调用方法,如下: <package name="usercru ...
- python 3 学习字符串和编码
字符串和编码 阅读: 895464 字符编码 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字 ...
- 041 First Missing Positive 第一个缺失的正数
给一个未排序的数组,找出第一个缺失的正整数.例如,[1,2,0] 返回 3,[3,4,-1,1] 返回 2.你的算法应该在 O(n) 的时间复杂度内完成并且使用常数量的空间.详见:https://le ...
- Mysql有什么办法批量去掉某个字段字符中的空格
Mysql有什么办法批量去掉某个字段字符中的空格?不仅是字符串前后的空格,还包含字符串中间的空格,答案是 replace,使用mysql自带的 replace 函数,另外还有个 trim 函数. ...
- Android 自定义Android ORM 框架greenDAO数据库文件的路径
import android.content.Context; import android.content.ContextWrapper; import android.database.Datab ...
- linux配置tomcat已service方式启动
1. 在/etc/init.d目录下新建文件,命名为tomcat2. 对tomcat文件进行编辑,执行 # cd /etc/init.d/ # vi tomcat 将下面代码粘上去 注意:下面代码ja ...
- selenium3+webdriver学习笔记1(访问常用请求)
#!/usr/bin/env python# -*- coding:utf-8 -*- from selenium import webdriverimport osimport time url1= ...
- Vue风格指南总结及对应ESLint规则配置
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10906951.html,多谢,=.=~ 必要的:规避错误: 强烈推荐:改善可读性和开发体验: 推 ...