VUE列表渲染 FOR-IN和FOR-OF的区别_vue for in-优快云博客

博客总结了V-FOR在Vue.js中遍历数组和对象时的不同，推荐使用for-of遍历数组，for-in遍历对象，并提供了详细的语法格式说明和实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一总结

V-for循环遍历数组时推荐使用of，语法格式为(item，index) （java代码中多用----直接取值）

item:迭代时不同的数组元素的值
index:当前元素的索引
V-for循环遍历对象时推荐使用in，语法格式为(item,name,index) （v-for多用）

item:迭代时对象的键名键值
name:迭代时对象的键名
index:当前元素的索引

二比较

V-FOR遍历数组

DATA:
    list:[
        {name:'1'},
        {name:'2'},
        {name:'3'}，
    ]

html:
<div class="items" v-for='(item,name,index) of list'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in list'>{{item}}->{{name}}->{{index}}</div>

输出结果：(数组没有index值)
	{ "name": "1" }->0->
	{ "name": "2" }->1->
	{ "name": "3" }->2->
	
	{ "name": "1" }->0->
	{ "name": "2" }->1->
	{ "name": "3" }->2->

V-FOR遍历对象

DATA:
    listObject:{
        name:'soho',
        age:25,
        class:1909,
        grade:3
    } 

html:
<div class="items" v-for='(item,name,index) of listObject'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in listObject'>{{item}}->{{name}}->{{index}}</div> 

输出结果：
    soho->name->0
    25->age->1
    1909->class->2
    3->grade->3
    
    soho->name->0
    25->age->1
    1909->class->2
    3->grade->3

三实例

skuProps集合的格式

<div id="props">
 	<div v-for="(value,key) in skuProps" class="theme-options" > // skuProps是个map集合 value是个数组
 		<div class="cart-title">{{key}}</div> 					//key 就是 口味 包装
 		<ul>
 			<template v-for="v,index in value">
 				<li :class="{'sku-line':true,'selected':index==0}" :name="key"  @click=" " 
 					:data-key="key" :data-v="v">{{v}}</li> 		//v 就是 原味 烧烤 芥末
 			</template>
 		</ul>
 	</div>
 </div>
 <script type="text/javascript">
 date:{
		skuProps:{}	,		 //相当于一个map，用于存放当前套餐的属性
		}，
</script>