详解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 的 v-model用法实例
Nov 23 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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判断是否有Get参数的方法
2014/05/05 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php实现微信发红包
2015/12/05 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
es6函数之严格模式用法实例分析
2020/03/17 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
django之自定义软删除Model的方法
2019/08/14 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python assert关键字原理及实例解析
2019/12/13 Python
详解python tkinter模块安装过程
2020/01/06 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python有几个版本
2020/06/17 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
普通话宣传标语
2014/06/26 职场文书
大学生找工作求职信
2014/07/09 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年关工委工作总结
2014/11/17 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2015年中个人总结范文
2015/03/10 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python