首页 > 其他分享 >v-for key的简单理解

v-for key的简单理解

时间:2022-11-13 05:11:05浏览次数:47  
标签:index value ID 插入 理解 key 简单 id

<div v-for="(item,index) in list :key="index">{{item.name}}</div>

用index作为key  渲染的时候 会将index当做key值,这样就会出现 当插入一个数据的时候, 比如插入到了索引为1处,

那么插入的这个数据的索引就是1,key值也是1,而原本的1 就会依次移动,渲染,这样就浪费资源了

key=0  id=0 index=0 value=t0

key=1  id=1 index=1 value=t1

key=2  id=2 index=2 value=t2

 

用索引为key 插入一条数据

key=0  id=0 index=0 value=t0

key= 1 id=4 index=1 value=t4

key=2  id=1 index=2 value=t1

key=3  id=2 index=3 value=t2

 

如何解决 为每条数据添加一个唯一标识符 ID

ID是唯一的,当把ID作为key 渲染的时候 ID就是key值, 当插入一条数据的时候 插入的地方还是索引为1处,但是此处的key就是id 

key=0  id=0 index=0 value=t0

key= 4 id=4 index=1 value=t4

key=1  id=1 index=1 value=t1

key=2  id=2 index=2 value=t2

 

标签:index,value,ID,插入,理解,key,简单,id
From: https://www.cnblogs.com/dzs894330350/p/16885320.html

相关文章

  • 任务理解与分工
    任务理解与分工团队任务:1小组讨论对课程设计任务的理解2进行任务的功能划分和分工3任务的进度安排个人任务:1给出自己对分配任务的理解2给出会遇到的问题及......
  • 常用的包管理工具的简单使用
    brew(homebrew)brew是macOS系统的包管理软件。Homebrew是以最简单,最灵活的方式来安装苹果公司在MacOS中不包含的UNIX工具。homebrew基于Git仓库管理的。可以分为五个库:软件......
  • datax同步数据java简单用法
    1.到github下载源码,自己编译。同步数据支持mysql8.0,如果直接用编译好的会遇到各种问题。https://github.com/alibaba/DataX/blob/master/userGuid.mdidea导入项目,需要先......
  • 简单计算器
    思路将中缀表达式转化为后缀表达式处理 数据结构栈注目前只适用10以内的带括号的+-*/^运算#include<stdlib.h>#include<stdio.h>#include<stdbool.h>#inc......
  • 云原生安全:Trivy + Harbor实现镜像漏洞的简单、高效扫描
    作者|李大白本文已参与「开源摘星计划」,欢迎正在阅读的你加入。活动链接:​ ​https://github.com/weopenprojects/WeOpen-Star[文章来源]:《Harbor进阶实战》公众号......
  • 深入理解Java虚拟机——自动内存管理
    目录内存结构总览程序计数器(寄存器)各种码之间的关系程序计数器的特点虚拟机栈虚拟机栈溢出本地方法栈堆Heap堆内存溢出堆内存诊断方法区永久代和元空间对方法区的实现方法......
  • C# 判断网络是连接到互联网(简单有效)
    [System.Runtime.InteropServices.DllImport("wininet")]privateexternstaticboolInternetGetConnectedState(outintconnectionDescription,intreservedValue);......
  • 使用JFinal实现简单的学生管理系统
    JFinal简介Controller是JFinal核按心类美之一,该类作为MVC模式中的控制器。基于JFinal的Web应用的控制器需要继承该类。Controller是定义Action方法的地点,是组织Action的一......
  • 计算机网络性能的理解
    计算机网络性能数据比特(bit)是计算机中数据量的单位,一个比特就是二进制数字中的一个1或0。速率指的是数据的传送速率,它也称为数据率(datarate)或比特率(bit......
  • 一个动态规划的简单例题
    动态规划(DynamicProgramming)它是计算机中解决最优化问题的一种方法,效率高,速度快。一般思路:1、穷举法/暴力搜索2、记忆化搜索/剪枝3、改写成迭代形式思想1.动......