Vue指令：`v-for` 循环遍历

v-for：基于一个数据来渲染一个列表
在数组中：v-for="(item, index) in items"，其中item是被迭代的数据的别名，index是当前的索引（可选值），items是数据源
在对象中：v-for="(value, key, index) in object"，其中value是被迭代的数据的别名，key是键值（可选值），index是当前的索引（可选值），object是数据源
在使用v-for时，还需要指定一个唯一的key值，vue会根据key值找到对应的dom，会进行比对，如果发生变化，可以准确的进行更新，便于重排和重绘

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令之v-for</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 1. 循环遍历 字符串数组 -->
				<li v-for="item in items">{{ item }}</li>
			</ul>
			<hr>
			<table border="1">
				<tr>
					<th> 下标 </th>
					<th> 学生ID </th>
					<th> 学生姓名 </th>
				</tr>
				<!-- 2. 循环遍历 对象数组 -->
				<tr v-for="(student, index) in students" :key="student.id">
					<td> {{ index }} </td>
					<td> {{ student.id }} </td>
					<td> {{ student.name }} </td>
				</tr>
			</table>
			<hr>
			<!-- 3. 循环遍历 一个对象所有属性(包括方法) -->
			<div v-for="(value, key) in car">
				{{ key }} ： {{ value }}
			</div>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				items: ["华为手机", "小米手机", "苹果手机"],
				students: [{
						id: 101,
						name: "张三"
					},
					{
						id: 102,
						name: "李四"
					},
					{
						id: 103,
						name: "王五"
					},
				],
				car: {
					brand: "比亚迪-汉",
					year: "2022",
					color: "black",
					price: 200000,
					run() {
						console.log("very fast")
					}
				}
			}
		})
	</script>
</html>

浏览器中的显示结果

PS：如有任何问题，欢迎在下面评论区留言，让我们共同进步，非常感谢！（^o^）v

web前端开发 > Vue

#JavaScript #web前端 #Vue

06-Vue指令之v-for

https://liaoliaocode.xyz/article/cf33/

作者

Brian.Gao

发布于

2022年4月10日

许可协议

07-Vue指令之v-on 上一篇

05-Vue指令之v-bind 下一篇

06-Vue指令之v-for

Vue指令：v-for 循环遍历

Vue指令：`v-for` 循环遍历