目录

1.v-for循环普通数组

2.v-for循环对象数组

3.v-for循环对象中的属性 

4.v-for循环数字 

1.v-for循环普通数组

v-for="(item,i) in list"

示例:

在vue实例的data中增加一个数组

data: {
    list: [1, 2, 3, 4, 5]
}

循环数据

<ul>
    <li v-for="(item,i) in list">索引:{{i}}---每一项:{{item}}</li>
</ul>

结果

2.v-for循环对象数组

v-for="(item,i) in userList"

示例

在vue实例的data中增加一个数组

data: {
    userList: [
        {id: 1,name: "zs1",age: 21}, 
        {id: 2,name: "zs2",age: 22}, 
        {id: 3,name: "zs3",age: 23}, 
        {id: 4,name: "zs4",age: 24},
        {id: 5,name: "zs5",age: 25}
    ]
}

循环数组对象

 <ul>
 <li v-for="(item,i) in userList">索引:{{i}}---ID:{{item.id}}---姓名:{{item.name}}---年龄:{{item.age}}</li>
 </ul>

结果

3.v-for循环对象中的属性 

v-for="(val,key,i) in userList[0]"

示例

<div v-for="(val,key,i) in userList[0]">i: {{i}}---键:{{key}}---值:{{val}}</div>

结果

注意:
在遍历对象身上的键值对时,除了有 val key 键值对,在第三个位置还有一个索引

4.v-for循环数字 

v-for=“i in 10”

示例

<p v-for="i in 10">第{{i}}个p标签</p>

结果

 注意:
v-for迭代数字时,值从1开始

Logo

前往低代码交流专区

更多推荐