v-for指令遍历数组、对象、对象数组区别
简单记录一下
1、先看例子:
v-for遍历对象和数组
<!--数组遍历-->
<div v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</div>
<!--对象遍历-->
<div v-for="(objValue,key,index) of obj" :key="index">{{index}}-{{key}}-{{objValue}}</div>
<!--对象数组遍历-->
<ul>
<li v-for="arrObjContent in arrObj" :key="arrObjContent.id">{{arrObjContent.content}}</li>
</ul>
2、数组和对象实例化:
<script>
export default {
data(){
return{
/*数组*/
arr:[1,2,3,4,5],
/*对象*/
obj:{
name:'小张',
sex:'女',
age:24,
},
/*对象数组1*/
arrObj:[
{
id:1,
content:"对象数组1"
},
{
id:2,
content:"对象数组2"
},
{
id:3,
content:"对象数组3"
}
]
}
},
}
</script>
3、v-for遍历数组、对象、对象数组区别说明:
<!--
遍历数组:v-for="(item,index) in arr" :key="index"
其中,item是对应数组arr里面的value值,index对象数组的下标,index值唯一
遍历对象:v-for="(objValue,key,index) of obj" :key="index"
其中,objValue对象对象obj的value值,与上例中的item值同理,key对应对象中的key值,例如obj里面的name,index为obj对象下标,与数组中的index同理。
遍历对象数组:<li v-for="arrObjContent in arrObj" :key="arrObjContent.id">{{arrObjContent.content}}</li>
其中:arrObjContent对应对象数组中的对象,key值为arrObjContent.id即数组对象中的id值
-->