码迷,mamicode.com
首页 > 其他好文 > 详细

Vue——v-for中 key 属性的使用

时间:2019-10-20 13:11:44      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:push   用户   rip   ice   htm   异常   mamicode   lis   现象   

当在组件中使用 v-for 时,key 现在是必须的。

 

首先,为了方便演示。我们先搭建一个基础结构

技术图片

 

 

 

现在我们目前添加的是用的 push 方法,添加到了对象的尾部

在添加之前选中了第五个后再添加也不会出现上面异常

技术图片

 

接下来我们再来看看如果是使用 unshift 方法,是添加到对象前面的

技术图片

 

我们可以看到如果在添加之前选中了其中一项,后再添加就会出现索引错位的现象

技术图片

 

 

所以我们需要给对象里面的每一项都绑定上一个唯一的标识

这个时候就可以用到我们的这个 key 了

技术图片

 

 绑定好之后我们再来看一下

技术图片

现在可以看到我们没有添加新用户之前,我们选中了 5号,添加之后选中的还是 5号

附上完整代码

<!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>
</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=‘add‘>
        </div>

        <p v-for=‘item in list‘ v-bind:key=‘item.id‘>
            <input type="checkbox">{{ item.id }} --- {{ item.name }}
        </p>
    </div>
    <script src="../vue/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ‘#app‘,
            data: {
                id: ‘‘,
                name: ‘‘,
                list: [{
                    id: 1,
                    name: ‘勒布朗‘
                }, {
                    id: 2,
                    name: ‘杜兰特‘
                }, {
                    id: 3,
                    name: ‘库里‘
                }, {
                    id: 4,
                    name: ‘罗斯‘
                }, {
                    id: 5,
                    name: ‘乔治‘
                }]
            },
            methods: {
                add(){
                    this.list.unshift({id: this.id, name: this.name})
                }
            }
        })
    </script>
</body>

</html>

 

Vue——v-for中 key 属性的使用

标签:push   用户   rip   ice   htm   异常   mamicode   lis   现象   

原文地址:https://www.cnblogs.com/yangpeixian/p/11707069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!