v-for的用法

说明

今天将介绍一下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>

此时v-for中有三个参数,item是对象每一项的value值(这里的1,2,3),name是每一项的key值(这里的a,b,c),index是索引值。

结语

如果这篇文章对你有帮助,记得给我点赞评论吧!谢谢!
在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
v-for是Vue.js中的一个指令,它用于在模板中遍历数组或对象,并按照指定的方式进行渲染。可以通过在元素上使用v-for指令来循环渲染元素。在Vue.js中使用v-for指令需要结合in或者of来使用。 例如,在Vue.js中使用v-for指令来遍历数组,可以使用以下语法: ``` <ul> <li v-for="item in language">{{ item }}</li> </ul> ``` 其中,language就是要遍历的数组,item表示数组中的每个元素。在这个例子中,会根据language数组的长度复制相应数量的li元素,每个li元素中的内容为数组中的每个元素。 除了遍历数组,v-for指令也可以用于遍历对象。例如: ``` <ul> <li v-for="(item, index) in person">{{ index }}. 我会使用: {{ item }}</li> </ul> ``` 在这个例子中,person表示要遍历的对象,item表示对象中的每个属性值,index表示属性的索引。在每个li元素中,会显示索引值以及属性值。 总结来说,v-for指令是Vue.js中一个常用的遍历方法,它可以用于循环渲染数组或对象,并按照指定的方式进行渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue快速入门(九) 之 v-for用法](https://blog.csdn.net/weixin_44415928/article/details/104904997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue中v-for的用法](https://blog.csdn.net/yilanyoumeng3/article/details/88176124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值