今天发现在给元素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. 0day笔记(1)PE文件格式与虚拟文件内存的映射

    PE文件格式 PE 文件格式把可执行文件分成若干个数据节(section),不同的资源被存放在不同的节中. 一个典型的 PE 文件中包含的节如下: .text 存放着二进制的机器代码 .data 初始 ...

  2. （四）PL/SQL运算符

    运算符是一个符号,告诉编译器执行特定的数学或逻辑操作. PL/SQL语言有丰富的内置运算符,运算符提供的以下几种类型: 1.算术运算符 2.关系运算符 3.比较运算符 4.逻辑运算符 5.字符串运算符 ...

  3. qt 鼠标拖动窗口 跳动 解决

    因为获取当前的位置,似乎没有把标题栏的高度记进去. 所以移动前,得考虑到标题栏的高度. 用以下方式获取标题栏高度: QApplication::style()->pixelMetric(QSty ...

  4. Net core项目实战篇01---EFCore CodeFirs For Mysql 数据库初始化

    从今天开始我们用Net Core进行项目实战,采用微服务构架,因此你会看到我各模块开始都是用的web api.项目中的代码直接可以复制.费话不多说,现在就来跟我一起开始吧! 1.打开VS2017—&g ...

  5. Apache Storm 官方文档 —— Storm 与 Kestrel

    本文说明了如何使用 Storm 从 Kestrel 集群中消费数据. 前言 Storm 本教程中使用了 storm-kestrel 项目和 storm-starter 项目中的例子.建议读者将这几个项 ...

  6. Python自动化运维一之psutil

    1.1系统性能信息模块psutil 1.1.1下载安装psutil 1.   wget https://pypi.python.org/packages/source/p/psutil/psutil- ...

  7. Azkaban3.81.x部署+坑

    一.前提安装 1.1 Java1.8环境搭建 1) 下载jdk1.8并解压: # tar -zxvf jdk-8u201-linux-i586.tar.gz -C /usr/local 2) 添加Ja ...

  8. ACM算法--二分法--模板

    // 在单调递增序列a中查找>=x的数中最小的一个(即x或x的后继) while (l < r) { int mid = (l + r) / 2; if (a[mid] >= x) ...

  9. 商汤提出解偶检测中分类和定位分支的新方法TSD，COCO 51.2mAP | CVPR 2020

    目前很多研究表明目标检测中的分类分支和定位分支存在较大的偏差,论文从sibling head改造入手,跳出常规的优化方向,提出TSD方法解决混合任务带来的内在冲突,从主干的proposal中学习不同的 ...

  10. python 中关于无法导入自己写的类。解决方法

    1.错误描述 之前在学习python的过程中,导入自己写入的包文件时.from 自己写的类,会发现没有弹出选择.并且全输入类名称后会发现类名与相关导入的方法会爆红.如图: 2.原因分析 pycharm ...