: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. 【JQuery-02】事件绑定多次造成多次执行

    http://blog.csdn.net/always_littlesun/article/details/52594548

  2. Springboot 后台管理框架halo.kotlin

    https://gitee.com/backControl/halo-kotlin 现在开了两个分支,一个分支在做数据分析,一个分支是集成spring oauth2.0技术 之后会接入最新的技术和实现 ...

  3. ffmpeg摄像头推流

    ffmpeg -f dshow -i video="Integrated Camera" -vcodec libx264 -preset:v ultrafast -tune:v z ...

  4. Linux清空文本内容

    测试文件:test.txt 第一种: $> test.txt 第二种: $echo "" > test.txt 第三种: $cat /dev/null > tes ...

  5. 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_2 回顾自定义mybatis的流程分析

  6. 【RequestContext】关于RequestContext的一些小心得

    版权声明:随意转载,注明出处 https://blog.csdn.net/River_Continent/article/details/77511389后台传参,一直是一个比较重要的地方,如果涉及W ...

  7. 学习 Node.js 的 6 个步骤

    第一步 对于刚接触Node.js的新手来说,第一步无非是打好基础,你需要弄明白以下事情: JavaScript 的特性和语法.假如你对 JavaScript 还不熟悉的话,推荐书籍及链接: JavaS ...

  8. c++ 读取 utf-8 文件到 string

    #include <iostream> #include <assert.h> #include <fstream> #include <string> ...

  9. 6.824 Lab 2: Raft 2C

    Part 2C Do a git pull to get the latest lab software. If a Raft-based server reboots it should resum ...

  10. 请求转发、包含、重定向 getAttribute 和 setAttribute POST和GET编码

     一.请求转发  请求包含  请求重定向 Demo5.java   注意:doPost()方法中别忘写doGet(request, response); public void doGet(HttpS ...