: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的作用)的更多相关文章

  1. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  2. vue 数据绑定 绑定属性 循环渲染数据

    <template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{ ...

  3. vue 用v-if 或者 v-show 渲染dom时,初次加载闪烁的问题

    js 是等dom加载完成后操作的, 所以加载的时候,会闪烁. 此时,你会惊奇的发现,原来闪烁的dom或者文本 不闪烁了.

  4. 【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  5. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  6. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

  7. Vue学习笔记(三)条件渲染和循环渲染

    目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...

  8. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

  9. Vue如何循环渲染图片

    Vue如何把服务器返回的图片数据渲染出来 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg. 我的做法是先在data里定义一个数组,来存储服 ...

随机推荐

  1. php数组合并用加号(+)和用array_merge()的区别

    结论:用加号合并数组:既考虑数字索引的键值对,也考虑字符串索引的键值对,用前边数组的值覆盖后边的键名相同的值; 用array_merge()合并数组:只考虑字符串索引的键值对,用后边数组的值覆盖掉前面 ...

  2. JavaScript-Load-Image

    如何将图片显示为canvas https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-scale.js h ...

  3. windows server 2008 r2 配置ftp (FileZilla Server )

    1.需要个ftp 2.在华为云内部,用IIS,配置后如果用主动模式,客户端需要配置后客户端需要做配置才能访问,去掉√,见下图. 3.华为云的教程,配被动需要把1024以上的端口都放开,不安全! 但客户 ...

  4. maven 插件的应用

    在pom.xml里配置 以测试插件介绍为主 <build> <plugins> <plugin> <groupId>org.apache.maven.p ...

  5. VC CString,int,string,char*之间的转换

    CString转string : CString strMfc = "test"; std::string strStr; strStr = strMfc.GetBuffer(); ...

  6. CentOS7 nginx安装与卸载

    简明清晰,易操作,参照: CentOS7 nginx安装与卸载

  7. c++实验7 二叉树

    二叉树数据结构表示及基本操作算法实现 1.所加载的库函数或常量定义及类的定义: #include<stdlib.h> #include<stdio.h> #include&qu ...

  8. OpenStack Nova 高性能虚拟机之 CPU 绑定

    目录 文章目录 目录 前文列表 KVM KVM 的功能列表 KVM 工具集 KVM 虚拟机的本质是什么 vCPU 的调度与性能问题 Nova 支持的 vCPU 绑定 vcpu\_pin\_set 配置 ...

  9. MariaDB增删改

    1.MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型: 1.整数:int, bit( ...

  10. 001-Django简介与项目创建

    简介 django,是用python语言写的开源web开发框架,并遵循MVC设计 主要目的是简便.快速的开发数据库驱动的网站 强调代码复用,有很多第三方插件,强调快速开发和DRY(DoNotRepea ...