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