详解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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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中将数组转成XML格式的实现代码
2011/08/08 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js运动应用实例解析
2015/12/28 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python WSGI的深入理解
2018/08/01 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
会计系毕业求职信
2014/08/07 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
离婚协议书范文2015
2015/01/26 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技