今天发现在给元素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. php sprintf() 函数把格式化的字符串写入一个变量中。

    来源:https://blog.csdn.net/zxh1220/article/details/79709207 HP sprintf() 函数用到的参数 printf — 输出格式化字符串 spr ...

  2. scrollview 和 listview滑动冲突解决

    http://blog.csdn.net/wanghao200906/article/details/51084975 http://www.cnblogs.com/shitianzeng/artic ...

  3. python教程(目录)

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

  4. LightOJ 1287 Where to Run(期望)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1287 题意:给定一个n个点的无向图(0到n-1),你开始在0.你开始遍历这个图 ...

  5. EntityFramework 迁移遇到的问题

    2019独角兽企业重金招聘Python工程师标准>>> 添加迁移add-migration migrationname 更新数据Update-Database EntityFrame ...

  6. 快放弃你的管家软件吧！ Part 2 强制删除

    在Windows系统中,难免会遇到用常规方法无法删除文件的情况. 经常有遇到过一些情况? 软件卸载了,有些文件夹就是删不掉,提示被占用,mmp,这时候你肯定想到了360文件粉碎机! mmp,我就删个文 ...

  7. Codeforces Round #622 (Div. 2) 1313 B Different Rules

    B. Different Rules Nikolay has only recently started in competitive programming, but already qualifi ...

  8. CF1316E Team Building

    CF1316E [Team Building] 状压dp,感觉比D简单 \(f[i][s]\),表示考虑前\(i\)个人,状态为\(s\)(\(s\)的第\(j-1\)个二进制位表示队员的第\(j\) ...

  9. docker 安装centos7并SSH远程连接

    1.安装centos7 镜像 1.搜索并拉取centos镜像(默认最新镜像) docker search centos docker pull centos 2.建立本机对应docker-centos ...

  10. 如何在Windows下安装MySQL5和MySQL8的多实例

    MySQL5和MySQL8多实例安装方法: 1.首先下载MySQL5和MySQL8 官方下载链接:https://dev.mysql.com/downloads/mysql/  下载旧版本: 下载好后 ...