今天发现在给元素v-for渲染的时候，想给元素添加key特性存储索引，发现不奏效：

<div class="apic" v-for="(pic,index) in msg.pics"   ...>

<img :src="pic" :key="index">

key特性在渲染后是不出现的。

将key改为其他自定义名称即可，比如：

<img :src="pic" :pic-key="index">

vue中v-for索引不要用key的更多相关文章

  1. vue中 给router-view 组件的 绑定 key 的原因

    不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...

  2. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  3. 理解vue中v-for循环中得key原理及一些错误

    作用:给节点做一个标识,相当于人类的身份证号,虚拟DOM中的标识 下列是key值的一些使用场景和带来的问题:   js:    const vm = new Vue({             el: ...

  4. 图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  5. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  6. Vue中 key keep-alive

    keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...

  7. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  8. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  9. Vue中的key到底有什么用？

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  10. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

随机推荐

  1. docker commit理解构建镜像(7)

    镜像是多层存储,每一层是在前一层的基础上进行的修改: 而容器同样也是多层存储是在以镜像为基础层,在基础层上加一层作为容器运行时的存储层. 当我们使用Docker Hub的镜像无法满足我们的需求时,我们 ...

  2. python教程(目录)

    很早就想出一套python的零基础入门教程,各种原因一直没动手.今天立个flag,2020年一定完成这个目标. 入门篇 完全零基础的小白应该从这里看起. 一.计算机原理 这里不是要让大家去深入的学习计 ...

  3. Codeforce-CodeCraft-20 (Div. 2)-A. Grade Allocation

    n students are taking an exam. The highest possible score at this exam is m. Let ai be the score of ...

  4. linux上github的简单使用

    Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中.目前,包括Rubinius ...

  5. thinkphp 5.x~3.x 文件包含漏洞分析

    漏洞描述: ThinkPHP在加载模版解析变量时存在变量覆盖的问题,且没有对 $cacheFile 进行相应的消毒处理,导致模板文件的路径可以被覆盖,从而导致任意文件包含漏洞的发生. 主要还是变量覆盖 ...

  6. 如何在C#/.NET Core中使用责任链模式

    原文:Chain Of Responsbility Pattern In C#/.NET Core 作者:Wade 译者:Lamond Lu 最近我有一个朋友在研究经典的"Gang Of F ...

  7. 时间日期相关类：Date类，DateFormat类&SimpleDateFormat类，Calendar类

    日期相关类 1.Date类:日期时间类 A.构造方法 Date(): 根据当前系统时间创建日期对象 ​ Date(Long time):根据传入的毫秒值时间创建日期对象 B.成员方法 Long get ...

  8. java基础篇 之 foreach探索

    我们看下这段代码: public class Main { public static void main(String[] args) { List list = new ArrayList(); ...

  9. SpringCloudStream学习（三）RabbitMQ中的惰性队列

    ​ 从RabbitMQ 3.6.0之后,有了 Lazy Queues 的概念-一个会尽早的将队列中的内容移动到磁盘的队列,并且只有当消费者需要的时候,才会将它们加载到内存中 ​ 惰性队列设计的一个主要 ...

  10. 错误：Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.

    Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...