5，v-for循环

v-for循环数组

<div id="app">
    <div v-for="item in list">{{item}}</div>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5,6,7]
        },
    })
</script>

​ 也可以使用v-for="(item,i) in list"，这个i就是对应数据的索引

<div id="app">
    <div v-for="(item,i) in list">{{i}}-----{{item}}</div>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5,6,7]
        },
    })
</script>

---

v-for循环数组对象

<div id="app">
    <div v-for="(user,i) in list">{{i}}---{{user.id}}---{{user.name}}</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            list: [
                {id: 1, name: '张三'},
                {id: 2, name: "李四"},
                {id: 3, name: "王五"}
            ]
        },
    })
</script>

数组中包裹的对象

v-for遍历一个对象

<div id="app">
    <div v-for="(value,key) in user">{{key}}---{{value}}</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            user:{
                id:1,
                name:"杨超越",
                age:22
            }
        },
    })
</script>

注意的是，对于v-for中（）两个参数，第一个是值，第二个是键，所以无论取名是什么，但是对应的位置是确定的，在第三个位置是索引。也就是说，第一个位置是value，第二个位置是key，第三个位置是索引

v-for迭代循环，，也就是循环一段数字

<div id="app">
    <div v-for="count in 10">这是第{{count}}次循环</div>
</div>
<script>
    var cm=new Vue({
        el:'#app',
    })
</script>

注意的是，就算不使用相关的vue数据，方法，但是vue的模板结构还是需要写的

v-for循环中key的使用

待续。。。。。

注意点

在组件中使用v-for中key是必须的