key疑问

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2023-02-28 16:06:31

同学你好,解答如下:

1、冒号:用来给元素绑定动态属性,:key就是给div绑定key属性,key的属性值是变量index的值,即key的值不是固定的字符串,而是变量。冒号的作用,如下课程中讲过,建议回顾一下:

https://class.imooc.com/lesson/2153#mid=50936&time=116

https://class.imooc.com/lesson/2153#mid=50940&time=176

2、key后面的index是变量:

https://img1.sycdn.imooc.com//climg/63fdb446092f826108620101.jpg

它是变量数组时,对应的索引:

https://img1.sycdn.imooc.com//climg/63fdb464091a393808450161.jpg

上述代码含义是:

遍历数组listArray,当遍历索引0时,index是0,会生成一个div,并且该div添加了key="0";当遍历索引1时,index是1,还会生成一个div,并且该div添加了key="1";当遍历索引2时,index是2,会再次生成一个div,并且该div添加了key="2"......。

3、vue框架规定,遍历生成元素的时候,每个元素需要添加key属性,并且key的属性值不能重复。这样做,便于vue底层计算处理元素,提升vue框架性能。通过第二点分析,:key="index"这种写法,可以满足每个div的key是不重复的,即满足框架要求。这是很常见的做法,要记住。

祝学习愉快!

  • 如果遍历的是对象,也是写 :key="index" 吗?可是遍历对象前面 (value,key,index) in ObjectList,已经用过key了哦,有点混乱了

    2023-06-01 16:33:18
  • 可以。:key中的key是固定属性名,而属性值是变量:

    https://img1.sycdn.imooc.com//climg/64785ca4094dc8b209050116.jpg

    https://img1.sycdn.imooc.com//climg/64785cb7099006a709460167.jpg

    属性名和变量可以同名,不影响。

    另外,遍历的时候,value、key、index这几个变量名可以自定义,不是固定的,比如:

    https://img1.sycdn.imooc.com//climg/64785d000983954811630157.jpg

    另外,同学的教学服务期到期了,建议续费,否则就没法享受答疑服务了哈。

    2023-06-01 16:56:27
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师