v-for指令的几种使用方式

1.循环普通数组

<div id="app">
        <p v-for="(item,i) in list">索引值：{{i}}-------每一项：{{item}}</p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6,7]
             },

2.循环对象数组

<div id="app">
        <p v-for="item in list">{{ item.id }}------{{ item.name }}</p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'111'},
                    {id:2,name:'222'},
                    {id:3,name:'333'},
                    {id:4,name:'444'}
                ]
             },

3.循环对象

<div id="app">
        <p v-for="(val,key) in user">值：{{ val }}---------健：{{ key }}</p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
               user:{
                   id:1,
                   name:'abc',
                   gender:'男'
               }
             },

4.迭代数字

<div id="app">
       <!-- 如果用v-for迭代数字，前面的 count 值从 1 开始-->
        <p v-for="count in 10">这是第{{ count }}次循环</p>
    </div>

注意：key的使用事项：

<div id="app">
        <div>
            <label>Id:<input type="text" v-model="id"></label>
            <label>name:<input type="text" v-model="name"></label>
            <input type="button" value="添加" @click="add">
        </div>
        <!--在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值-->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">
            {{ item.id }}------{{ item.name }}
        </p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                    {id:1,name:'111'},
                    {id:2,name:'222'},
                    {id:3,name:'333'},
                    {id:4,name:'444'},
                    {id:5,name:'555'},
                ]
             },
            methods: {
                add(){
                    this.list.push({id:this.id,name:this.name})
                }
            }
        })
    </script>