解决v-for产生的警告的办法
当 Vue.js 用 v-for
正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"
。
这个默认的模式是有效的,但是只适用于不依赖子组件状态或临时 DOM 状态(例如:表单输入值)的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
属性。理想的 key
值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by
,但它的工作方式类似于一个属性,所以你需要用 v-bind
来绑定动态值(在这里使用简写):
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
建议尽可能使用 v-for
来提供 key
,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。
因为它是 Vue 识别节点的一个通用机制, key
并不特别与 v-for
关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。建议尽可能使用 v-for
来提供 key
,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。
解决v-for产生的警告的办法的更多相关文章
- Atitit 解决Unhandled event loop exception错误的办法
Atitit 解决Unhandled event loop exception错误的办法 查看workspace/.metadata/.log org.eclipse.swt.SWTError: No ...
- 解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题)
解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的 ...
- linq replace with single call to FirstOrDefault 解决使用resharper产生的警告
使用resharper时对linq使用的FirstOrDefault 一直产生一个警告, 解决办法: 参考The Linq FirstOrDefault() Method and Null Resul ...
- 解决导入TensorFlow后出现警告的的问题解决:通过降低numpy的版本
在原有基础上安装tensorflow 重新虚拟出一个环境安装tensorflow 安装 测试 大多教程都是重新虚拟出一个环境,原有环境就可以支持为什么还要重建一个新的环境,如果以后遇到坑了更新解释. ...
- No space left on device 解决Linux系统磁盘空间满的办法
最近Linux电脑在执行mvn时候总是报错: No space left on device 原因是磁盘空间满了,我马上加了20G的硬盘容量,但是还是报错,上网查了一下,发现了解决方法,我用了其中 ...
- 解决svn状态图标不显示的办法
SVN是一款出色的代码版本控制工具,大部分开发者都在使用.由于前不久刚做了系统,所以要重装一下SVN,结果就出了问题,问题就是,不管是文件处于什么状态他的提示图标都不显示,这就太不给力了吧.通过搜寻, ...
- 【转】解决Win7字体模糊不清晰的最佳办法
原文网址:http://blog.sina.com.cn/s/blog_3d5f68cd0100ldtp.html 相信初次用win7的朋友,都会遇到字体不清晰的问题,有很多人因为这个问题而放弃使用w ...
- cocos2d-x解决中文乱码问题的几种办法
昨天改写cocos2d-x的例程,想在其基础上加上一个计分系统.没有分数实在让人没有玩下去的动力! 我在主场景上加上了一个CCLabelTTF,用于显示分数. 但是意外的发现,当内容含有中文时,CCL ...
- 解决hadoop 集群启动常见错误办法
hadoop 集群常见错误解决办法 hadoop 集群常见错误解决办法: (一)启动Hadoop集群时易出现的错误: 1. 错误现象:Java.NET.NoRouteToHostException ...
随机推荐
- JQuery EasyUI学习记录(三)
1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...
- 【转】MFC消息映射详解(整理转载)
消息:主要指由用户操作而向应用程序发出的信息,也包括操作系统内部产生的消息.例如,单击鼠标左按钮,windows将产WM_LBUTTONDOWN消息,而释放鼠标左按钮将产生WM_LBUTTONUP消息 ...
- 【模板】树套树(线段树套Splay)
如题,这是一个模板... #include <algorithm> #include <iostream> #include <cstring> #include ...
- centos6启动故障排除
centos6中boot文件被全部删除的故障排除 /boot文件里关于启动的核心文件有三个,/vmlinuz-2.6.32-696.e16.x86_64,initramfs-2.6.32-696.el ...
- DNS 工作原理是什么,域名劫持、域名欺骗、域名污染又是什么
DNS 工作原理是什么,域名劫持.域名欺骗.域名污染又是什么 2014年11月27日 10:05:40 阅读数:6726 标签: dns网络互联网顶级域名递归 更多 个人分类: 网络学习 一.DN ...
- Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)
Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...
- k8s资源指标API及metrics-server资源监控
简述: 在k8s早期版本中,对资源的监控使用的是heapster的资源监控工具. 但是从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics API 获取资源使用指标,例如 ...
- 批量ping IP并检测IP延迟率和丢包率脚本
脚本文件如下: #!/bin/bash #Author:Mr.Ding #Created Time:2018-08-26 07:23:44 #Name:ping.sh #Description: sh ...
- Vue中引入TradingView制作K线图
**前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...
- 汇编语言 Part 1——简介、基本语法、内存分段与内存地址
简介 什么是汇编语言? 汇编语言是一种低级的编程语言,在程序的语句和体系结构的机器代码指令之间有很强的对应关系. 每种汇编语言都特定于特定的计算机体系结构,但需要解释或编译.汇编语言也可以称为符号机器 ...