详解Vue的列表渲染


Posted in Vue.js onNovember 20, 2021

1. v-for:遍历数组内容(常用)

in 也可以用 of 代替

<body>
	<div id="div1">
		<li v-for='(p,i) in persons' :key=i>
			{{p.name}}--{{p.age}}
			<!-- 张--18
				 李--19
				 刘--17 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:[
				{id:'001',name:"张",age:18},
				{id:'002',name:"李",age:19},
				{id:'002',name:"刘",age:17},
			]
		}
	})
</script>

2. v-for:遍历对象属性(常用)

<body>
	<div id="div1">
		<li v-for='(p,k) in persons' :key=k>
			{{p}}--{{i}}
			<!-- 张--name
				 18--age -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:{
				name:"张",
				age:18
			}
		}
	})

3.遍历字符串(不常用)

<body>
	<div id="div1">
		<li v-for='(p,i) in str' :key=i>
			{{p}}--{{i}}
			<!-- a--0 
				 b--1
				 c--2
				 d--3
				 e--4 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			str:"abcde"
		}
	})
</script>

4.遍历指定次数(不常用)

<body>
	<div id="div1">
		<li v-for='(p,i) in 5' :key=i>
			{{p}}--{{i}}
			<!-- 1--0
				 2--1
				 3--2
				 4--3
				 5--4 -->
		</li>
	</div>
</body>

5.key 的作用和原理

在上面都用的index 作为key,但是在破坏顺序修改dom以及有input内容就会出错。仅在用于渲染页面而不需要修改页面时可用index作为key.

强烈建议用数据的唯一标识,如id、手机号、邮箱号作为key

1.虚拟DOM中key的作用:

key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM] ,随后Vue进行[新?拟DOM]与[旧?拟DOM]的差异比较,比较规则如下:

2.对比规则:

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

①.若?拟DOM中内容没变, 直接使用之前的真实DOM!

②.若?拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到到页面。

3.用index作为key可能会引发的问题:

1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。

2.如果结构中还包含输入类的DOM:

会产生错误DOM更新==> 界面有问题。

4.开发中如何选择key?

1.最好使用每条数据的唯一标识作 为key,比如id、 手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue+iview实现文件上传
Nov 17 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
Vue3中的Refs和Ref详情
Nov 11 #Vue.js
详细聊聊vue中组件的props属性
一定要知道的 25 个 Vue 技巧
You might like
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
基于python实现简单日历
2018/07/28 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
零基础小白多久能学会python
2020/06/22 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
发展部经理职责规定
2014/02/22 职场文书
法律进企业活动方案
2014/03/04 职场文书
干部选拔任用方案
2014/05/26 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技