详解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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
MySQL数据源表结构图示
2008/06/05 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python基于内置函数type创建新类型
2020/10/22 Python
python中常用的数据结构介绍
2021/01/12 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
外企办公室竞聘演讲稿
2013/12/29 职场文书
趣味活动策划方案
2014/02/08 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
股权投资协议书
2016/03/23 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server
OpenFeign实现远程调用
2022/08/14 Java/Android