vue列表渲染 v-for

v-for 用于展示列表数据。语法为：v-for="(item, index) in xxx" :key="yyy" 。

v-for 可以遍历数组、对象、字符串（不常用）、指定次数（很少使用）

 遍历数组【常用】

<div id="APP">
	<ul>
		<li v-for="item in list">
			{{item.name}} - {{item.age}}
		</li>
	</ul>
</div>

注：v-for 一般写在需要重复创建的标签上，其中 item 是数组中的每一项，list 就是需要循环的数据。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			list:[
				{id:1, name:"张三", age:21},
				{id:2, name:"李四", age:18},
				{id:3, name:"王五", age:26}
			]
		}
	}
});

遍历数组时的下标

<div id="APP">
	<ul>
		<li v-for="(item,index) in list">
			{{item.name}} - {{item.age}} - {{index}}
		</li>
	</ul>
</div>

注：v-for 中的 index 就是每次循环生成的下标，推荐使用下标时用小括号将 item 和 index 包裹起来。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			list:[
				{id:1, name:"张三", age:21},
				{id:2, name:"李四", age:18},
				{id:3, name:"王五", age:26}
			]
		}
	}
});

 注：可以用 of 替代 in 作为分隔符，因为 of 更接近 JS 迭代器的语法，

例：

v-for="(item,index) of list"

维护状态 key

key 属性用于给标签添加一个唯一标识，就像身份证号一样。推荐 v-for 配合 key 使用。

当 v-for 重新渲染时，Vue 会根据每个标签的 key 值对比内容是否发生变化，如果未发生变化，将直接复用这个标签，如果发生变化，那么只会将发生变化的标签替换为新标签。

<div id="APP">
	<ul>
		<li v-for="(item,index) in list" :key="item.id">
			{{item.name}} - {{item.age}} - {{index}}
		</li>
	</ul>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			list:[
				{id:1, name:"张三", age:21},
				{id:2, name:"李四", age:18},
				{id:3, name:"王五", age:26}
			]
		}
	}
});

注：key 值不会在页面中显示，因为 key 值只会存在于虚拟 DOM 中，用于对比元素内容是否发生变化。

遍历对象

<div id="APP">
	<ul>
		<li v-for="(val,name) of car" :key="name">
			{{val}} - {{name}}
		</li>
	</ul>
</div>

注：当遍历对象时，第一个参数 val 表示对象中的值，第二个参数 name 表示对象中的键名。并且我们用 name 作为 key 的唯一标识，因为对象中的键名不允许重复。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			car:{
				name:"奥迪A8",
				price:"70万",
				color:"黑色"
			}
		}
	}
});

 遍历字符串【不常用】

<div id="APP">
	<ul>
		<li v-for="(char,index) of str" :key="index">
			{{char}} - {{index}}
		</li>
	</ul>
</div>

注：当遍历字符串时，第一个参数 char 表示字符串中的每个字符，第二个参数 index 表示每个字符的下标。这里我们采用 index 下标作为 key 的唯一标识【不建议】

 指定遍历次数【很少使用】

<div id="APP">
	<ul>
		<li v-for="(number,index) of 5" :key="index">
			{{number}} - {{index}}
		</li>
	</ul>
</div>

注：当指定遍历次数时，第一个参数 number 表示数字，从 1 开始，第二个参数 index 表示每个数字的下标，从 0 开始。这里同样采用 index 下标作为 key 的唯一标识（不建议）

原创作者：吴小糖

创作时间：2023.2.16