博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)
阅读量:5145 次
发布时间:2019-06-13

本文共 524 字,大约阅读时间需要 1 分钟。

:key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗。

  当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出现警告,我想对代码有比较高追求的开发者都不会允许这一大片的黄色出现的吧,如下图

 

  在项目运行的时候也不会有问题发生,不过这恶心的警告让我感到无法忍受,故而研究一下:key的使用方式。

 <div v-for="(items key index) in list" :key="key"></div>

  大家可以发现,其实:key的中可以填写的选择很多,但是很多人又不知道到底是填写哪一个值会比较好,所以本人研究过后,发现,如果使用v-for循环中的key键值或者index索引值,得到的结果都是无法实现单条数据渲染,只有使用items中的自身属性才可以达到单条数据各自渲染的结果,所以,一般会使用:key="items.id"等items中的属性。

  一般来说,使用:key="items.id"的属性有利于代码的优化,减少页面资源消耗

转载于:https://www.cnblogs.com/CreteWu/p/8496234.html

你可能感兴趣的文章
Postman-----如何导入和导出
查看>>
【Linux】ping命令详解
查看>>
8、RDD持久化
查看>>
第二次团队冲刺--2
查看>>
使用Xshell密钥认证机制远程登录Linux
查看>>
pair的例子
查看>>
uva 387 A Puzzling Problem (回溯)
查看>>
Oracle中包的创建
查看>>
django高级应用(分页功能)
查看>>
【转】Linux之printf命令
查看>>
关于PHP会话:session和cookie
查看>>
C#double转化成字符串 保留小数位数, 不以科学计数法的形式出现。
查看>>
利用IP地址查询接口来查询IP归属地
查看>>
构造者模式
查看>>
Hbuild在线云ios打包失败,提示BuildConfigure Failed 31013 App Store 图标 未找到 解决方法...
查看>>
找到树中指定id的所有父节点
查看>>
jQuery on(),live(),trigger()
查看>>
treegrid.bootstrap使用说明
查看>>
[Docker]Docker拉取,上传镜像到Harbor仓库
查看>>
javascript 浏览器类型检测
查看>>