VUE指令-列表渲染v-for

最新推荐文章于 2024-09-28 15:43:20 发布

llzkkk12

最新推荐文章于 2024-09-28 15:43:20 发布

阅读量869

点赞数

分类专栏： vue for 文章标签： vue for

本文链接：https://blog.csdn.net/llzkkk12/article/details/78887746

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

for

1 篇文章 0 订阅

订阅专栏

v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 itemin items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

v-for="item in items"

v0.v-for指令示例(默认方式)</div>

<hr />

<div>

Name:{{item.name}}

</div>

v-for="(item,index) in items"

v1.v-for指令示例(item,index))</div>

<hr />

<div>

Name:{{item.name}} + Key:{{key}} + Index:{{index}}

</div>

v-for="(value,key,index) initems" 对象迭代

v0.v-for指令示例(value,key,index)</div>

<hr />

<div>

Name:{{value}} + Key:{{key}} + Index:{{index}}

</div>

也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。

// TODO

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

<divv-for="item in items":key="item.id">
    <!-- 内容 -->
  </div>

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key还具有其他用途，我们将在后面的指南中看到其他用途。

v-for with v-if

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用

<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
		<title>HelloDemo</title>
	</head>

	<body style="height: 100%;">
		<style>

		</style>
		<!-- 
			VUE指令v-for列表渲染
				v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。
				也可以用 of 替代 in 作为分隔符
			REF:
				http://www.runoob.com/vue2/vue-loop.html
				https://cn.vuejs.org/v2/guide/list.html
		-->
		<div id="appVue">
			<!-- 格式v-for="(value,key,index) in items" -->
			<!-- 对象迭代可以有三个参数(value,key,index) -->
			<div style="height: 200px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.v-for指令示例(value,key,index)</div>
				<hr />
				<div>
					<div style="font-size: 20px;" v-for="(value,key,index) in obj">
						Name:{{value}} + Key:{{key}} + Index:{{index}}
					</div>
				</div>
			</div>

			<!-- 格式v-for="(item,index) in items" -->
			<!-- 数组只有两个参数(item,index) -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v1.v-for指令示例(item,index))</div>
				<hr />
				<div>
					<div style="font-size: 20px;" v-for="(item,key,index) in items">
						Name:{{item.name}} + Key:{{key}} + Index:{{index}}
					</div>
				</div>
			</div>
			
			<!-- 格式v-for="item in items" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.v-for指令示例(默认方式)</div>
				<hr />
				<div>
					<div style="font-size: 20px;" v-for="item in items">
						Name:{{item.name}}
					</div>
				</div>
			</div>			
		</div>
		<script>
			new Vue({
					el: "#appVue",
					data: {
						items:[{
							name:"AAA"
						},{
							name:"BBB"
						},{
							name:"CCC"
						}],
						obj:{
							prop0:"AAA",
							prop1:"BBB",
							prop2:"CCC"
						}
					}
				}

			)
		</script>
	</body>
</html>

REF:

http://www.runoob.com/vue2/vue-loop.html

https://cn.vuejs.org/v2/guide/list.html