Vue指令之v-for的使用

目录

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开始