v-for的用法

//js中的foreach
[5,7,9].forEach((item,i)=>{console.log(item+'+'+i)})

 

普通数组

<div id="app">
        <!-- value和i为自定义名称，可以改，意义不变 -->
        <p v-for="(value,i) in list">索引值：{{i}}     每一项是：{{value}}</p>
        
    </div>
    <script >
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6]
            },
            methods:{
                
            }
        })

        //[5,7,9].forEach((item,i)=>{console.log(item+'+'+i)})
    </script>

对象数组

<div id="app">
        <!-- value和i为自定义名称，可以改，意义不变 -->
        <p v-for="user in list2">id：{{user.id}}     name：{{user.name}}</p>
        
        <!-- 可以查看索引值 -->
        <p v-for="(user,i) in list2">id：{{user.id}}     name：{{user.name}}   索引值{{i}}</p>

        
    </div>
    <script >
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6],
                list2:[
                { id:1,name:'xzy1'},
                { id:2,name:'xzy2'},
                { id:3,name:'xzy3'},
                { id:4,name:'xzy4'},
                ]
            },
            methods:{
                
            }
        })

 

 

 循环对象

<div id="app">
        <!-- 在遍历对象身上的键和值的时候，除了有值，键，在第三个位置还有索引 -->
        
        <p v-for="(val,key,i) in userr">值是：{{val}}     键是：{{key}}   索引值是：{{i}}</p>

        
    </div>
    <script >
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6],
                list2:[
                { id:1,name:'xzy1'},
                { id:2,name:'xzy2'},
                { id:3,name:'xzy3'},
                { id:4,name:'xzy4'},
                ],
                userr:{
                    id:1,
                    name:'xzy!',
                    gender:'女'
                }
            },
            methods:{
                
            }
        })

 

 

 迭代数字

<div id="app">
        <!-- in后面能放数字，但是count从1开始 -->
        
        <p v-for="count in 10">第{{count}}次循环</p>

        
    </div>

 

 

  •  v-for要写在循环生成的元素上，不能写在父元素里
  • 当new Vue()扫瞄到v-for，自动遍历of后数组中每个元素，每遍历一个元素，创建一个当前html元素的副本
  • value和i的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用

v-for的注意事项

当在组件中使用v-for时，key属性必需，对比如下：

当不使用key属性时，选中大二，然后在list数组的起始位置增加一个对象(使用unshift)，增加完成后，checkbox变成选中大一。

<body>
    <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="添加" v-on:click="add()">
        </div>
        <p v-for="item in list2">
            <input type="checkbox">
            {{item.name}}
        </p>

        
    </div>
    <script >
        var vm = new Vue({
            el:'#app',
            data:{
                name:'',
                id:'',
                
                list2:[
                { id:1,name:'大一'},
                { id:2,name:'大二'},
                { id:3,name:'大三'},
                { id:4,name:'大四'},
                ]
            },
            methods:{
                add(){
                    this.list2.unshift({id:this.id,name:this.name})
                }
            }
        })

    </script>

 

 

 使用key之后

在组件中，使用v-for循环的时候，或者在一些特殊情况下，如果v-for有问题，必需在使用v-for的同时指定唯一的：key值

<p v-for="item in list2" v-bind:key='item'>