【Vue】v-for中:key中item.id与Index使用的区别

先说结论,推荐使用【:key="item.id"】而不是将数组下标当做唯一标识,前者能做到全部复用

场景:删除无序列表中的<li>标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建一个Vue实例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body><div class="container"><div id="app"><!-- 事件:做<li>标签的删除功能,根据class的id删除,此案例删除class="3"的标签--><!-- 原代码 --><li class="1">1</li><li class="2">2</li><li class="3">3</li><li class="4">4</li><li class="5">5</li><!-- 1.使用item.id做:key唯一标识符 --><!-- 删除3后,变成 --><li class="1">1</li><li class="2">2</li><li class="4">4</li><li class="5">5</li><!-- vue开始将剩下的四个<li>与源代码的五个<li>进行匹配使用的是diff算法对比新旧虚拟DOM由于精准删除3,1和2直接代码复用,4和5发现class和内容均能匹配上将class重新排列 1234则映射出新的组合,如下:--><li class="1">1</li><li class="2">2</li><li class="3">4</li><li class="4">5</li>
<!-- ========================================================================= --><!-- 2.使用index做:key唯一标识符 --><!-- 删除3后,index数组下标会发生改变,变成 --><li class="1">1</li><li class="2">2</li><li class="3">4</li><li class="4">5</li><!-- Vue将内容为4的li与内容为3的对比,发现匹配不上,删除3标签再将内容为5的li与内容为4的对比,也匹配不上,又删除4标签 -->
<!--  ========================================================================--><!-- 总结:使用index很多情况不能代码复用,强制更新元素,影响性能 --></div></div><script>const app = new Vue({el: '#app',data:{},methods:{}})</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vulfocus靶场搭建

vulfocus靶场搭建 什么是vulfocus搭建教程靶场配置场景靶场编排靶场优化 什么是vulfocus Vulfocus 是一个漏洞集成平台&#xff0c;将漏洞环境 docker 镜像&#xff0c;放入即可使用&#xff0c;开箱即用&#xff0c;我们可以通过搭建该靶场&#xff0c;简单方便地复现一些框架…

纯血鸿蒙系统,拿什么与安卓、iOS比?

鸿蒙系统的出现就是来打破这种僵局的&#xff0c;华为鸿蒙是以生态系统为基本而产生的独立系统。如果与Android、iOS系统无异何必浪费时间。生态圈为18N&#xff0c;其中不止是app应用层开发、还有智能家居、家电、数码、车载等等一系列生态闭环。 而华为鸿蒙是全栈自研底座&am…

【明道云】如何实现循环处理

【背景】 发现明道云工作流中并没有直接的循环逻辑模块&#xff0c;那么如何实现循环呢&#xff1f; 【方案】 通过主流程获取多条数据&#xff0c;搭配子流程来实现遍历循环效果。子流程中可以直接感应获取单行数据。 如果直接在主流程中通过直接获取方式获取多条数据&…

如何理解CSS的边框宽度?

CSS 边框宽度学习手记 CSS 边框宽度小概念 在CSS的世界里&#xff0c;border-width这个属性真的很实用&#xff0c;它能帮我指定HTML元素四周边框的宽度。这个宽度嘛&#xff0c;可以用像素px、点pt、厘米cm、相对单位em这些来表示&#xff0c;很方便吧&#xff01;还有呢&am…

Camunda和SpringBoot的兼容版本

官网 https://docs.camunda.org/manual/7.15/user-guide/spring-boot-integration/version-compatibility/ Camunda和SpringBoot的兼容版本

微信小程序uniapp劳务咨询系统知识百科考试系统java+python+nodejs+php均支持

使用劳务咨询服务平台小程序的分别管理员和用户二个权限子模块。 管理员所能使用的功能主要有&#xff1a;首页、个人中心、用户管理、百科分类管理、知识百科管理、地区信息管理、劳务需求管理、试卷管理、试题管理、论坛交流、系统管理、考试管理等。 用户用户端可以实现首页…

更改WordPress作者存档链接author和Slug插件Edit Author Slug

WordPress默认所有用户的存档永久链接都是/author/username/&#xff0c;不管是管理员还是订阅者或贡献者或作者或编辑。如果你想要自定义用户存档链接&#xff0c;比如根据角色不同使用不一样的author&#xff0c;或者自定义作者链接中的用户名Slug&#xff0c;那么建议考虑使…

【Deep Learning 7】深度可分离卷积

&#x1f31e;欢迎来到Pytorch的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年2月21日&a…

CTFshow web(sql注入171-175)

web171 还得先爆表名 -1 union select 1,2,group_concat(table_name) from information_schema.tables where table_schema database()-- 注意这里已经提示你了&#xff0c;只要知道是ctfshow_user&#xff0c;就可以拿到flag -1 union select 1,2,password from ctfshow_user…

Python第十九章(模块)

系统的模块库一般处于外部库中的Lib里面 一。导入模块的方式&#xff1a; 1.方式一&#xff1a; 导入&#xff1a;import 模块名1&#xff0c;模块名2 调用&#xff1a;模块名 . 功能名() 2.方式二&#xff1a; 导入&#xff1a;from 模块名 import 功能1&#xff0c;功能…

(每日持续更新)jdk api之ObjectOutput基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

2024.2.21

1、用多线程进行文件拷贝 #include<myhead.h>//参数结构体创建 typedef struct INFO {const char *srcfile;const char *destfile;int length; }Info;//定义获取文件长度的函数 int get_file_len(const char *srcfile,const char *destfile){int srcfd,destfd;//只读形式…

基于vue的个性化推荐餐饮系统Springboot

项目&#xff1a;基于vue的个性化推荐餐饮系统Springboot 摘要 现代信息化社会下的数据管理对活动的重要性越来越为明显&#xff0c;人们出门可以通过网络进行交流、信息咨询、查询等操作。网络化生活对人们通过网上购物也有了非常大的考验&#xff0c;通过网上进行点餐的人也…

ctfshow web入门 web141-145

1.web141 ^\w$表示在开头和末尾匹配字母数字_&#xff0c;传入的v3值不能有字母数字_&#xff0c;即无字母的命令执行 php中1-phpinfo()是可以执行的&#xff0c;加减乘除都可以实现 这里或&#xff0c;异或&#xff0c;取反等运算都可以 这里采用羽师傅的异或脚本生成paylo…

用十篇论文聊聊关于使用LLM做query Rewrite的问题

一、什么是query改写&#xff1f; query改写其实理解起来很简单&#xff0c;就是把原始的query经历一系列的操作&#xff0c;然后变成另外一个query&#xff0c;从而达到提升召回率和准确率的效果。 query改写的过程中&#xff0c;这一系列的操作&#xff0c;其实是围绕两个方面…

网络原理 - HTTP/HTTPS(4)

HTTP响应详解 认识"状态码"(status code) 状态码表示访问一个页面的结果.(是访问成功,还是失败,还是其它的一些情况...).(响应结果如何) 学习状态码 -> 为了调试问题. 写服务器时,按照状态码的含义正确使用. 200 OK 这是最常见的状态码,表示访问成功. 抓包抓…

面试经典150题——单词规律

"Dont wait. The time will never be just right." - Napoleon Hill 1. 题目描述 2. 题目分析与解析 首先还是得把题目先读懂&#xff0c;我们直接来看看示例&#xff1a; 根据上面的示例&#xff0c;我们可以看出pattern其实就是表示单词出现的规律&#xff0c;每…

Linux中alarm/setitimer函数(信号函数)

alarm函数 函数原型&#xff1a; unsigned int alarm(unsigned int seconds); 函数描述&#xff1a;设置定时器&#xff08;闹钟&#xff09;。在指定seconds后&#xff0c;内核会给当前进程发送 14&#xff09;SIGALRM信号。进程收到该信号&#xff0c;默认动作终止。每个进程…

git工具

一、命令行工具 二、Git 客户端可视化工具-推荐 1.常用工具 tortoisegit 官网 https://tortoisegit.org/ 推荐 sourcetree 官网https://www.sourcetreeapp.com/ 2.tortoisegit安装 2.1 下载安装包 2.2 下载语言包 2.3 安装 2.4 安装语言包 5.使用 5.1 新建分支 5.2 切换分支…

python基础教程—总结篇

这篇是Python基础教程系列的总结篇&#xff0c;这里这个专栏的地址&#xff1a;《Python教程》 首先必须声明一点&#xff0c;这是基础教程&#xff0c;所以面向的是新人&#xff0c;没有学过Python的同学&#xff0c;所以这套教程并没有涉及到比较难的并发编程模块&#xff0…