今天发现在给元素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. SQL三表连接查询与集合的并、交、差运算查询

    use db_sqlserver2 select 姓名, 工资, 面积, 金额, (工资+金额/1000) as 实发工资 from 职工,仓库, 订购单 where 职工.职工号=订购单.职工号 a ...

  2. 获取 保存 系统信息 [Windows]

    出处:https://www.technig.com/find-windows-10-system-information/ 在“运行”里,运行 msinfo32. System Informatio ...

  3. JavaScript 后台获取数据 - HTTP203 Advent(中文字幕)

    如果关注过 Google 相关的开发技术,对 HTTP203 这个栏目应该不陌生. 这是 HTTP203 圣诞节的特别版! Jake(@jaffathecake)和 Surma(@DasSurma)有 ...

  4. Vim Configuration

    安装原生态的Vim之后,界面是这样的: 行号,没有:自动缩进,没有:括号匹配,没有~ 为了我们使用的方便,进行一些基本的配置: sudo vim /etc/vim/vimrc 进入配置界面: 如下图进 ...

  5. C++11的mutex和lock_guard，muduo的MutexLock 与MutexLockGuard

    互斥锁是用来保护一段临界区的,它可以保证某段时间内只有一个线程在执行一段代码或者访问某个资源. C++11的mutex和lock_guard C++11新增了mutex,使用方法和linux底下的常用 ...

  6. Fiddler手机端抓包环境设置与过滤（一）

    一.PC端Fiddler设置 1.安装https 证书 打开Fiddler->Tool->Fiddler Options->HTTPS tab,勾选上并Capture HTTPS C ...

  7. Flutter 系统是如何实现ExpansionPanelList的

    老孟导读:Flutter组件有一个很大的特色,那就是很多复杂的组件都是通过一个一个小组件拼装而成的,今天就来说说系统的ExpansionPanelList是如何实现的. 在了解ExpansionPan ...

  8. 线段树 离散化 E. Infinite Inversions E. Physical Education Lessons

    题目一:E. Infinite Inversions 这个题目没什么思维量,还比较简单,就是离散化要加上每一个值的后面一个值,然后每一个值放进去的不是1 ,而是这个值与下一个点的差值. 因为这个数代表 ...

  9. Vuel路由跳转动画

    1.App.vue中添加 <transition :name="animate"> <router-view/> </transition> e ...

  10. python gdal 读取栅格数据

    1.gdal包简介 gdal是空间数据处理的开源包,其支持超过100种栅格数据类型,涵盖所有主流GIS与RS数据格式,包括Arc/Info ASCII Grid(asc),GeoTiff (tiff) ...