v-for的用法_v-for的参数-CSDN博客

本文链接：https://blog.csdn.net/qq_40951289/article/details/106991719

说明

今天将介绍一下vue.js中的v-for的用法。
在这里插入图片描述

用法

直接上代码了。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
		<!-- item是目标数组的每一项,index是对应的下标 -->
			<ul v-for="(item,index) in arr">
				<li>{{item}}</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					arr: [1, 2, 3, 4]
				},
			});
		</script>
	</body>
</html>

这里我们使用v-for来遍历数组arr，然后显示在页面中。代码运行结果如下图。
在这里插入图片描述
当目标是一个对象时，结果有什么不同呢？

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<ul v-for="(item,name,index) in obj">
				<li>{{item}}</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					obj:{
                        a:1,
                        b:2,
                        c:3
                    }
				},
			});
		</script>
	</body>
</html>