【前端框架Vue】基本指令：v-for

最新推荐文章于 2025-04-12 19:31:36 发布

程序酷巴戈

最新推荐文章于 2025-04-12 19:31:36 发布

阅读量1.6k

点赞数 11

分类专栏：前端框架Vue 文章标签： vue.js 前端框架前端

本文链接：https://blog.youkuaiyun.com/weixin_55723857/article/details/135051276

版权

前端框架Vue 专栏收录该内容

13 篇文章

订阅专栏

本次主要介绍Vue的基本指令：v-for。

使用工具：HbuilderX

一、v-for是什么

v-for是vue的一个基本指令，主要用在循环语句中，循环遍历对象、数组并渲染。

二、v-for怎么用？

1、遍历并渲染数组的每一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>csdn</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id='app'>
			<div v-for='(testcase,index) in testcases' :key='index'>
				<h1 style='color: green;' v-if='testcase.result === "success"'>{{index}}:{{ testcase }}</h1>
				<h1 style='color: yellow;' v-else-if='testcase.result === "fail"'>{{index}}:{{ testcase }}</h1>
				<h1 style='color: red;' v-else'>{{index}}:{{ testcase }}</h1>
			</div>
		
		</div>
		<script>
			// 初始属性
			var csdn= {
				data(){
					return{
						testcases:[
							{
								case_id: 1,
								case_titl: '用例1',
								result: 'fail'
							},
							{
								case_id: 2,
								case_titl: '用例2',
								result: 'fail'
							},
							{
								case_id: 3,
								case_titl: '用例3',
								result: 'success'
							},
							{
								case_id: 4,
								case_titl: '用例4',
								result: 'error'
							}
						],
					}
				},
				methods:{
				}
			}
			var app = Vue.createApp(lemon)
			app.mount('#app')
		</script>
	</body>
	
</html>

从浏览器的渲染效果可以看到，v-for='(testcase,index) in testcases' 中 testcase 是从 testcases 中遍历出来的每一条数据，即每一个{}数据；index是属性的索引，从0开始。

在定义v-for循环时，往往需要绑定key属性，key需要保证每次遍历出来的值是唯一的，因此一般用index索引。

2、遍历并渲染对象的每一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>csdn</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id='app'>
			<div v-for = 'item in oneObj' :key='index'>
				{{item}}
			</div>
			
			<hr>
			<div v-for = '(value,name) in oneObj' :key='index'>
				{{name}},{{value}}
			</div>
		</div>
		<script>
			var csdn= {
				data(){
					return{
						oneObj:{
							name:'csdn',
							age:18,
							gender:'male',
						}
					}
				},
				methods:{
				}
			}
			var app = Vue.createApp(lemon)
			app.mount('#app')
		</script>
	</body>
</html>

从浏览器渲染效果可以看出，v-for = 'item in oneObj' :key='index' 中，item是oneObj对象里的value值，并没有渲染出对象里的key值。

而如果要想将key、value值一起渲染出来，则需要在v-for语句中一起循环遍历：v-for = '(value,name) in oneObj'，并要注意：括号中遍历的是(value,key)的顺序。

例如将上例中的v-for = '(value,name) in oneObj' 写成v-for = '(name,value) in oneObj'，而其他不变，可以看到渲染效果如下：

可以发现，<div v-for = '(value,name) in oneObj' :key='index'>{{name}},{{value}}</div> 和 <div v-for = '(name,value) in oneObj' :key='index'>{{name}},{{value}}</div> 渲染对象的key和value值是反着来的，并不会因为写了value在name的后面，就把对象的value值赋给(name,value) in oneObj中value这个变量。

三、总结

v-for可以循环遍历并渲染数组、对象。

<!-- 使用 v-for 循环渲染数组中的每个元素 -->
<div v-for="(item, index) in array" :key="index">
  {{ item }}
</div>

<!-- 使用 v-for 循环渲染对象中的每个属性 -->
<div v-for="(value, key, index) in object" :key="index">
  {{ key }}: {{ value }}
</div>