vue_11使用v-for在组件中需要注意的问题

使用v-for遍历显示数据的时候,如果会动态的添加数据,最好在使用v-for的时候设置一个key,这个key可以是num和string类型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
    name:<input type="text" v-model="name"/> <br/>
    id: <input type="text" v-model="id"/>
    <input type="button" value="button_append" @click="fun1"/>
    <input type="button" value="button_insert" @click="fun2"/>

    <!-- 在使用v-for的时候最好给每一项都设置一个唯一的key,这个key类型是 num或者string-->
    <p v-for="user in list1" :key="user.id">
        <input type="checkbox" />{{user.name}} <br/>
    </p>
</div>
<script>
    var vm1 = new Vue({
        el:"#test",
        data:{
            list1:[
                {"name":"a",id:0},
                {"name":"b","id":1},
                {"name":"c","id":2}
            ],
            name:"",
            id:""

        },
        methods:{
            fun1: function () {
                this.list1.push({"name":this.name,id:this.id});
//                在数组后面添加元素
            },
            fun2: function () {
                this.list1.unshift({"name":this.name,id:this.id});
//                在数组前面添加元素

            }
        }

    })
</script>
</body>
</html>

vue_11使用v-for在组件中需要注意的问题

推荐阅读更多精彩内容