今天发现在给元素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. 2019-2020-1 20199326《Linux内核原理与分析》第四周作业

    第四周学习内容 庖丁解牛Linux内核分析第三章:MenuOS的构造 Linux内核分析实验三 学到的一些知识 操作系统两大宝剑:1.中断上下文的切换--保存现场和恢复现场 2.进程上下文的切换 Li ...

  2. 异常：NoSuchFieldError: BEST_MATCHING_HANDLER_ATTRIBUTE

    出现的原因 pom 依赖之间不匹配导致 当前的 pom 调整后访问资源成功后面的 pom

  3. SpringBoot @ConfigurationProperties详解

    文章目录 简介 添加依赖关系 一个简单的例子 属性嵌套 @ConfigurationProperties和@Bean 属性验证 属性转换 自定义Converter SpringBoot @Config ...

  4. Java程序员必备基础结构图

    前言 最近看了深入理解Java虚拟机第三版,整理了一些基础结构图,算是比较全的了,做一下笔记,大家一起学习. 1.Java虚拟机运行时数据区图 JVM内存结构是Java程序员必须掌握的基础. 程序计数 ...

  5. 内蒙古特检院利用物联网/RFID技术提高电梯检测水平

    随着电梯检验工作信息化进程的进一步深入,内蒙古特检院从检验工作中寻找新方法.新手段,为检验员新引入电梯检验手持终端设备,力求提高电梯检验水平,将"电梯安全惠民工程"落到实处. 电梯 ...

  6. Netflix:当你按下“播放”的时候发生了什么？

    从用户端来看,使用Netflix是很简单的,按下播放键之后视频就像变魔术一样完美呈现了.看起来很容易是吧?然而实际不是这样的.了解过云计算的人可能会简单地以为,既然Netflix使用AWS来提供视频服 ...

  7. Ubuntu 14.04 配置samba

    Ubuntu 14.04 配置samba: 安装略 # vi /etc/samba/smb.conf security = user  (在[global]下任意添加) [share] path = ...

  8. Openstack HA集群5-Keystone HA

    # yum install -y openstack-keystone httpd mod_wsgi # mysql -u root -p -e "CREATE DATABASE keyst ...

  9. 数制转换itoa atoi int转字符串 字符串转int string转int int转string

    在苦于昨晚最后一个数制转换题,他的转换结果必须是整形数,纳尼?转换完放数组里又要变成整形数.这是什么操作,而且如果是16进制,用字母A,B-表示,在进行运算时都难以计算. 突发奇想,当十进制成立的时候 ...

  10. Vector shrink 请求容器降低其容量和size匹配 shrink_to_fit();

    一.先从size 和capacity 说起 resize(),设置大小(size); reserve(),设置容量(capacity); size()是分配容器的内存大小,而capacity()只是设 ...