一、迭代普通数组
data中定义:
list:[1,2,3,4,5]
html中渲染:
<p v-for="(item,i) in list" :key="i"> 索引值:{{i}}---每一项{{item}}</p>
运行的效果:
二、迭代对象数组
data中定义:
foodData: [
{id:1,name: "苹果"},
{id:2,name: "香蕉"},
{id:3,name: "菠萝"}
]
html中渲染:
<ul>
<li v-for="(item,index) in foodData" :key="index">
索引值: {{index}} ---水果id:{{item.id}}---水果名:{{item.name}}
</li>
</ul>
运行的效果:
三、迭代对象
data中定义:
person:{
id:1,
name:'王小明',
job:'学生'
}
html中渲染:
<p v-for="(item,i) in person" :key="i"> 键:{{i}}---值{{item}}</p>
运行的效果:
四、迭代数字
html中渲染:
<p v-for="(count,i) in 10" :key="i">第{{count}}次循环</p>
运行的效果: