纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue列表渲染 详解Vue的列表渲染

维生素D没有用   2021-11-19 我要评论
想了解详解Vue的列表渲染的相关内容吗维生素D没有用在本文为您仔细讲解Vue列表渲染的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Vue详解,Vue列表渲染下面大家一起来学习吧

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、 手机号、SFZ号、学号等唯一值

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示使用index作为key是没有问题的

总结

本篇文章就到这里了希望能够给你带来帮助也希望您能够多多关注的更多内容!


相关文章

猜您喜欢

  • SecureCRT使用 SecureCRT的使用超详细教程

    想了解SecureCRT的使用超详细教程的相关内容吗超Ren专属在本文为您仔细讲解SecureCRT使用的相关知识和一些Code实例欢迎阅读和指正我们先划重点:SecureCRT使用下面大家一起来学习吧..
  • C++ String底层原理 深入浅出分析C++ string底层原理

    想了解深入浅出分析C++ string底层原理的相关内容吗自首的小偷在本文为您仔细讲解C++ String底层原理的相关知识和一些Code实例欢迎阅读和指正我们先划重点:C++,String底层原理,C++,数据结构下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式