今天发现在给元素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. 10w+QPS 的 Redis 真的只是因为单线程和内存？360&#176; 深入底层设计为你揭开 Redis 神秘面纱！

    原文链接:10w+QPS 的 Redis 真的只是因为单线程和内存?360° 深入底层设计为你揭开 Redis 神秘面纱! 你以为 Redis 这么快仅仅因为单线程和基于内存? 那么你想得太少了,我个 ...

  2. 百度云虚拟空间（BCH）

    百度云虚拟空间(BCH)上的一些默认配置 :first-child { margin-top: 0;}blockquote > :last-child { margin-bottom: 0;}i ...

  3. nginx+vue+thinkphp5.1部署，解决前端刷新404，以及前端404解决后，后台又404的问题

    宝塔的话直接在网站的伪静态一栏中如下就行 location /admin { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$1 la ...

  4. Nmap详细用法

    探测主机存活 (1)-sP :进行ping扫描 (2) -sn: ping探测扫描主机, 不进行端口扫描 (3)-sA     发送ACK探测存活 端口扫描 (1) -sS :半开放扫描 (2) sT ...

  5. REDHAT7进入单用户模式

    Redhat7采用的是grub2,和Redhat6.x进入单用户的方法不同. 一.init方法 1.centos7的grub2界面会有两个入口,正常系统入口和救援模式: 2.修改grub2引导 在正常 ...

  6. 企业云桌面-03-安装第1个企业 CA-013-CA01

    作者:学 无 止 境 QQ交流群:454544014 注意: <企业云桌面>系列博文是<企业云桌面规划.部署与运维实践指南>的基础部分,因为书中内容涉及非常多,非常全面,所以基 ...

  7. Visual Studio Code插件安装步骤

    1.进入扩展视图视图安装或卸载(快捷键Ctrl+shift+x) 转载于:https://www.cnblogs.com/SakalakaZ/p/7725159.html

  8. Nodejs与Mysql交互实现（异步写法，同步写法）

    https://blog.csdn.net/think_A_lot/article/details/93498737

  9. INTERVIEW #5

    笔试 150min,3题,每题100分,自己果然还是个蒟蒻呢~ 最近状态好差,虽然做了一些题,但还是考得稀烂,大概有几点需要加强: 独立做题,不要一边看板子一边写代码,更不要一开始就看题解: 对之前研 ...

  10. C++ 函数重载，函数模板和函数模板重载，选择哪一个？

    重载解析 在C++中,对于函数重载.函数模板和函数模板重载,C++需要有一个良好的策略,去选择调用哪一个函数定义(尤其是多个参数时),这个过程称为重载解析. (这个过程将会非常复杂,但愿不要遇到一定要 ...