Vue学习(九): v-for指令的四种使用方式

v-for循环普通数组

1. 直接循环输出数组内容
   <p v-for="item in list">这是数组内容:{{item}}</p>
list:[1,2,3,4,5,6]

2. 添加索引值

<p v-for="(item,i) in list">这是数组的索引值:{{i}},这是数组内容:{{item}}</p>

v-for循环对象数组

<p v-for="(user,i) in list">索引值:{{i}}, 用户ID:{{user.id}}, 用户名称:{{user.name}}</p>

list:[
                    {id:1,name:"a"},
                    {id:2,name:"b"},
                    {id:3,name:"c"},
                    {id:4,name:"d"},
                ]

v-for循环对象

在遍历对象身上的键值得时候，可以有val key 还有索引

<p v-for="(val, key, i) in user">索引值:{{i}}, 键:{{key}}, 值: {{val}}</p>

user:{
                id:1,
                name: 'a',
                gender: 'boy'
            }

v-for迭代数字

in 后面可以放普通数组，对象数组，对象和数字。
迭代数字从1开始

<p v-for="count in 10">这是第 {{count}} 次循环</p>