详解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新手入门指导教程
Nov 18 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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 缓冲的免费实现方法
2006/10/09 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
详解Python的单元测试
2015/04/28 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python版名片管理系统
2018/11/30 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
Android自定义双向滑动控件
2022/04/19 Java/Android