Vue学习之路第十四篇：v-for指令中key的使用注意事项

1、学前准备：

JavaScript中有一个方法：unshift() ，其作用是向数组的开头添加一个或更多元素，并返回新的长度。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

2、直接上代码

<script type="text/javascript"&gt;
    <span style="color: #0000ff"&gt;var</span> vm = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; Vue({
        el:</span>"#app"<span style="color: #000000"&gt;,data:{
            idValue:</span>''<span style="color: #000000"&gt;,nameValue:</span>''<span style="color: #000000"&gt;,list:[
                {id:</span>1,name:'奥迪'<span style="color: #000000"&gt;},{id:</span>2,name:'宝马'<span style="color: #000000"&gt;},{id:</span>3,name:'奔驰'<span style="color: #000000"&gt;},{id:</span>4,name:'劳斯莱斯'<span style="color: #000000"&gt;},{id:</span>5,name:'玛莎拉蒂'<span style="color: #000000"&gt;}
            ]
        },methods:{
            add(){
                </span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.list.unshift({
                    id : </span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.idValue,name : </span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.nameValue
                });
            }
        }
    })
</span></script>

这里我们定义了一个list集合，并通过在input中输入内容，然后把新的车型添加到list集合中并显示在页面上。运行结果如下：

我们在第一个input框中填入数字6，第二个input框中添加保时捷车型，点击添加按钮，运行结果如下;

看页面信息好像我们已经添加成功了，没有什么问题。现在我们把序号为5的玛莎拉蒂复选框勾上，然后再点击添加按钮，看看有什么现象。

What?明明勾的是玛莎拉蒂怎么变成劳斯莱斯了！原因就在于v-for指令只能简单的实现数据的遍历，当你的数据发生变化的时候，由于数据和指令的唯一关联就是遍历时的数组下标，所以当你勾选玛莎拉蒂的时候，指令记住了你勾选的数组下标为5（数组下标是从0开始的），当你往数组里添新元素之后，虽然数组长度变了，但是指令只记得你当时勾选的数组下标，于是就帮你把新数组中下标为5的劳斯莱斯给勾选了。为了解决这种问题，在使用v-for指令的时候我们需要加入一个新属性：key，写法为key="XX"，其中XX必须具有唯一性，即可以通过key来识别出对应的遍历元素。

这里在v-for指令里加入了key属性，通过属性绑定指令v-bind绑定了元素的序号，即通过序号来识别每个数组元素（当然这个时候你要保证序号不能重复，要具备唯一性，不然勾选序号重复的元素的时候还是会出现上面的问题）。这个时候再把序号为5的玛莎拉蒂复选框勾上，然后再点击添加按钮，看看有什么现象。

保时捷被成功添加了，而且玛莎拉蒂的复选框还是被选中状态。

总结：如果你只是简单的遍历，那么v-for指令完全可以满足，如果还涉及到数组数据的改变或者操作，那么就需要加上属性key来帮助指令来识别每个遍历元素。

每天进步一点点！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!