v-for 的学习

一、迭代普通数组

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>

运行的效果：