Table of contents
3. Properties in the v-for loop object
1. v-for loop ordinary array
v-for="(item,i) in list"
Example:
Add an array to the data of the vue instance
data: {
list: [1, 2, 3, 4, 5]
}
cycle data
<ul>
<li v-for="(item,i) in list">Index: {
{i}} --- each item: {
{item}}</li>
</ul>
result
2. v-for loop object array
v-for="(item,i) in userList"
example
Add an array to the data of the vue instance
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}
]
}
loop over array object
<ul>
<li v-for="(item,i) in userList">Index: { {i}}---ID: { {item.id}}---Name: { {item.name}} --- Age: { {item.age}}</li>
</ul>
result
3. Properties in the v-for loop object
v-for="(val,key,i) in userList[0]"
example
<div v-for="(val,key,i) in userList[0]">i: { {i}}---键：{ {key}}---值：{ {val}}</div>
result
Note:
When traversing the key-value pairs on the object, in addition to the val key key-value pairs, there is also an index at the third position
4.v-for loop numbers
v-for=“i in 10”
example
<p v-for="i in 10">The { {i}}th p tag</p>
result
Note:
When v-for iterates over numbers, values start at 1