详解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 简单实现前端权限控制的示例
Dec 25 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 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引用效率问题分析
2012/03/23 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python 5个实用的技巧
2020/09/27 Python
python 操作excel表格的方法
2020/12/05 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
家长对老师的感言
2014/03/11 职场文书
药品业务员岗位职责
2014/04/17 职场文书
高中学生评语大全
2014/04/25 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
民间借贷被告代理词
2015/05/23 职场文书