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

1、学前准备:

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

2、直接上代码


    
        序号: 
        车名:
        

for="item in list"> 序号:{{item.id }} , 车名:{{ item.name }}

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

Vue学习之路第十四篇:v-for指令中key的使用注意事项_第1张图片

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

Vue学习之路第十四篇:v-for指令中key的使用注意事项_第2张图片

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

Vue学习之路第十四篇:v-for指令中key的使用注意事项_第3张图片

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

for="item in list" v-bind:key="item.id"> 序号: {{item.id }} , 车名:{{ item.name }}

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

Vue学习之路第十四篇:v-for指令中key的使用注意事项_第4张图片

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

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

 

每天进步一点点!

 

转载于:https://www.cnblogs.com/shibin90/p/10345254.html

你可能感兴趣的:(Vue学习之路第十四篇:v-for指令中key的使用注意事项)