Vue学习(十): v-for中key的使用注意事项

在2.20+的版本里，当组件使用v-for时候，key现在是必须的。
当Vue.js 用v-for 正在更新已渲染过的元素列表中时，它默认用"就地复用"策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每个项提供一个唯一key属性。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<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="添加" @click="add1">
        </div>
        <!--v-for循环的时候，只能用number或string-->
        <!--key 在使用的时候，必须使用v-bind属性绑定的形式，指定key值-->
        <!--在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须要在使用v-for的同时，需要指定唯一的字符串/数字 类型 :key 值-->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">
            ID: {{item.id}} , name: {{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                id:'',
                name:'',
                list:[
                {id:1,name: 'a'},
                {id:2,name: 'b'},
                {id:3,name: 'c'},
                {id:4,name: 'd'},
                {id:5,name: 'e'}
                ]
            },
            methods:{
                add(){//添加
                    this.list.push({id: this.id,name: this.name})
                },
                add1(){//添加
                    this.list.unshift
                    ({id: this.id,name: this.name})
                }
            }
        })
    </script>
</body>
</html>

v-for循环的时候，只能用number或string。
key 在使用的时候，必须使用v-bind属性绑定的形式，指定key值
当使用this.list.unshift({id: this.id,name: this.name}) 添加按钮事件，未绑定v-bind:key="item.id"时候，会出现例如:选择id为4，添加一个后，会上移到id为3

=》
如果是<p v-for="item in list" :key="item"> 会出现错误，是因为在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须要在使用v-for的同时，需要指定唯一的字符串/数字类型 :key 值