vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)
: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"的属性有利于代码的优化,减少页面资源消耗
vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)的更多相关文章
- 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
- vue 数据绑定 绑定属性 循环渲染数据
<template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{ ...
- vue 用v-if 或者 v-show 渲染dom时,初次加载闪烁的问题
js 是等dom加载完成后操作的, 所以加载的时候,会闪烁. 此时,你会惊奇的发现,原来闪烁的dom或者文本 不闪烁了.
- 【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given
laravel循环三维数组 +++ vue.js循环三维数组 (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- Vue学习笔记(三)条件渲染和循环渲染
目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- Vue如何循环渲染图片
Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...
随机推荐
- Servlet的常见错误
Servlet常见的错误: 1.404错误:资源未找到 原因一:在请求地址中的servlet的别名书写错误. 原因二:虚拟机项目名称拼写错误. 2.500错误:内部服务器错误 错误一: java.la ...
- 关于Qt 构建套件(Kit) 编译器 自动识别不正确 不能修改的问题
当系统内有多个Qt的版本的时候,QtCreater会自动识别出 编译器,Qt版本,和构建套件(Kit),但是有时候会发现,识别出来的路径不对,而且不能修改. 当出现这是问题的时候,可以到 qtcrea ...
- Delphi 快速检测是否联网 判断网线是否拔开。 但是不能判断是否能上网
https://blog.csdn.net/chelen_jak/article/details/50204145 Delphi 快速检测是否联网 2015年12月07日 12:01:26 chele ...
- Python中的Django框架中prefetch_related()函数对数据库查询的优化
实例的背景说明 假定一个个人信息系统,需要记录系统中各个人的故乡.居住地.以及到过的城市.数据库设计如下: Models.py 内容如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 1 ...
- 2018.03.29 python-pandas transform/apply 的使用
#一般化的groupby方法:apply df = pd.DataFrame({'data1':np.random.rand(5), 'data2':np.random.rand(5), 'key1' ...
- golang 标准库 sync.Map 中 nil 和 expunge 区别
本文不是 sync.Map 源码详细解读,而是聚焦 entry 的不同状态,特别是 nil 状态和 expunge 状态的区分. entry 是 sync.Map 存放值的结构体,其值有三种,分别为 ...
- 【Html5】表单全选、全不选
以下为页面效果图 用HBuilder做 谷歌浏览器 index.html代码 <!DOCTYPE html> <html> <head> <meta c ...
- 学习 Node.js 的 6 个步骤
第一步 对于刚接触Node.js的新手来说,第一步无非是打好基础,你需要弄明白以下事情: JavaScript 的特性和语法.假如你对 JavaScript 还不熟悉的话,推荐书籍及链接: JavaS ...
- 远程桌面 虚拟打印 到本地打印机(虚拟化 终端 远程接入 RemoteApp)
使用远程桌面或remoteapp进行打印时,若需使用本地的打印机,需要通过重定向方式,但本地打印机如果五花八门比较杂,那给服务器安装打印机驱动很麻烦. 其实可以借助虚拟打印机简化操作,省去给服务器安装 ...
- Java内存管理和回收
转载自http://blog.csdn.net/cutesource/article/details/5906705 JVM内存组成结构 JVM栈由堆.栈.本地方法栈.方法区等部分组成,结构图如下所示 ...