【购物车案例】for循环为什么使用key

要做出一个简单的购物车界面。首先,有一个复选框,可以选择商品,后面紧跟的是商品名称,然后,是删除按钮,根据这个需求,先写出一个简单的界面,代码如下:

<template><view class="out"><view class="item" ><checkbox></checkbox><text class="title" >索尼</text><text class="del" >删除</text></view></view>
</template><script setup></script><style lang="scss" scoped>.out{padding: 10px;}  .item{padding: 10px 0;.del{color: #c00;margin-left: 30px;}}
</style>

实际效果:
在这里插入图片描述
现在,定义一个商品循环体 ,对item进行循环,完成整个界面的制作,代码如下:

<template><view class="out"><view class="item" v-for="item in goods"><checkbox></checkbox><text class="title" >{{item.name}}</text><text class="del" >删除</text></view></view>
</template><script setup>
import {ref} from "vue" ;
const goods = ref([{id:1,name:"索尼"},{id:2,name:"摩托罗拉"},{id:3,name:"诺基亚"},{id:4,name:"LG"},
])</script><style lang="scss" scoped>.out{padding: 10px;}  .item{padding: 10px 0;.del{color: #c00;margin-left: 30px;}}
</style>

实际效果:
在这里插入图片描述
页面部分制作完毕,接下来开始逻辑部分,让删除键起作用,先给删除加上click事件,后在script中写入方法,删除的时候我们得知道删除的是哪一项,这里我们用索引值作为标识,代码如下:

<template><view class="out"><view class="item" v-for="(item,index) in goods"><checkbox></checkbox><text class="title" >{{item.name}}</text><text class="del" @click="remove(index)">删除</text></view></view>
</template><script setup>
import {ref} from "vue" ;
const goods = ref([{id:1,name:"索尼"},{id:2,name:"摩托罗拉"},{id:3,name:"诺基亚"},{id:4,name:"LG"},
])
function remove(index){goods.value.splice(index,1)
}
</script><style lang="scss" scoped>.out{padding: 10px;}  .item{padding: 10px 0;.del{color: #c00;margin-left: 30px;}}
</style>

实际效果:
在这里插入图片描述
成功实现删除,但注意看,在动画中,选中“摩托罗拉”,并将其删除后,“诺基亚”被选中了,这是因为没有key的情况下,Vue在数据项顺序改变时会复用错误的DOM元素,导致页面显示错误。我们给它加上key,key需要具有唯一性,这里给key设置为item.id,代码如下:

<template><view class="out"><view class="item" v-for="(item,index) in goods":key = "item.id"><checkbox></checkbox><text class="title" >{{item.name}}</text><text class="del" @click="remove(index)">删除</text></view></view>
</template><script setup>
import {ref} from "vue" ;
const goods = ref([{id:1,name:"索尼"},{id:2,name:"摩托罗拉"},{id:3,name:"诺基亚"},{id:4,name:"LG"},
])
function remove(index){goods.value.splice(index,1)
}
</script><style lang="scss" scoped>.out{padding: 10px;}  .item{padding: 10px 0;.del{color: #c00;margin-left: 30px;}}
</style>

现在,页面错误的情况解决了:
在这里插入图片描述

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

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

相关文章

openssh9.8p1更新 修复漏洞(CVE-2024-6387)

2024 年 7 月&#xff0c;互联网公开披露了一个 OpenSSH 的远程代码执行漏洞&#xff08;CVE-2024-6387&#xff09;。鉴于该漏洞虽然利用较为困难但危害较大&#xff0c;建议所有使用受影响的企业尽快修复该漏洞。 centos7 为例 yum -y install gcc make openssl-devel zlib…

三相感应电机的建模仿真(3)基于ABC相坐标系Level2 S-Fun以及定子串不对称电抗起动过程仿真分析

1. 概述 2. 三相感应电动机状态方程式 3. 基于Level2 S-Function的仿真模型建立 4. 动态分析实例 5. 总结 6. 参考文献 1. 概述 三相感应电机自然坐标系下的数学模型是一组周期性变系数微分方程(其电感矩阵是转子位置角的函数,转子位置角随时间按正弦规律变化),将其用…

[hudsonL@cock.li].mkp勒索病毒的最新威胁:如何恢复您的数据?

引言&#xff1a; 在当今数字化时代&#xff0c;勒索病毒成为网络安全领域的一个严重挑战。最近出现的.[hudsonLcock.li].mkp、[hendersoncock.li].mkp、[myersairmail.cc].mkp勒索病毒&#xff0c;以其具有破坏力的加密技术和极具威胁性的赎金要求&#xff0c;给个人用户和组…

量子保密通信协议原理:量子保密通信实验

纸上得来终觉浅&#xff0c;绝知此事要躬行。 在之前的文章中&#xff0c;我们对量子密钥分发协议原理、分发过程进行了详细的描述&#xff0c;今天我们实操一波。博主向大家隆重介绍一下华中师范大学量子保密通信虚拟仿真试验平台&#xff1a;量子保密通信是将量子密钥分发和一…

AR增强现实汽车装配仿真培训系统开发降低投入费用

随着互联网的无处不在&#xff0c;AR增强现实技术正逐步融入我们生活的每一个角落。深圳华锐视点作为一家引领行业潮流的AR内容开发的技术型公司&#xff0c;正以其卓越的技术实力和专业的服务团队&#xff0c;推动着国内AR技术向更加成熟和多元化的方向迈进。 深圳华锐视点提供…

[ TOOLS ] JFLASH 使用说明

一、使用everything查找JFLASH everything是指这个软件&#xff0c;使用这个方便查找想要的文件 二、创建一个工程并配置 创建完后进行配置&#xff1a; Target devic: 板子的芯片型号&#xff0c;比如R7FA6M4Target interface: 一般是SWDSpeed: 一般是4000kHz, 不能下载则将Sp…

从“+AI”到“AI+”,时代进入“Next Level”

“创新的速度比创新本身更重要。”埃隆马斯克曾这样说到。 近日&#xff0c;由马斯克所掌舵的特斯拉&#xff0c;在2024年世界人工智能大会上正式推出了第二代Optimus&#xff08;擎天柱&#xff09;人形机器人&#xff0c;距离第一代面世&#xff0c;仅过去9个月。 加速升级…

AI古风插画视频:成都亚恒丰创教育科技有限公司

AI古风插画视频&#xff1a;科技与传统美学的诗意交融 在数字技术的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;以其惊人的学习能力与创造力&#xff0c;正逐步渗透并重塑着艺术的边界。成都亚恒丰创教育科技有限公司其中&#xff0c;AI古风插画视频作为一股清流&a…

ArcGIS:探索地理信息系统的强大功能与实际应用

ArcGIS是一款功能强大的地理信息系统&#xff08;GIS&#xff09;软件&#xff0c;由Esri公司开发。它广泛应用于各个领域&#xff0c;包括城市规划、环境保护、资源管理、交通运输等。作为一名长期使用ArcGIS的用户&#xff0c;我深感这款软件在数据分析、地图制作和空间信息管…

Mac电脑上有什么好玩的肉鸽游戏推荐 苹果电脑怎么玩以撒的结合

Mac电脑尽管在游戏兼容性上可能不及Windows。但是&#xff0c;对于喜欢在Mac上游玩的玩家来说&#xff0c;依然有不少优秀的游戏可以选择&#xff0c;尤其是那些富有挑战性和策略性的肉鸽游戏。此外&#xff0c;对于经典游戏《以撒的结合》&#xff0c;Mac平台也提供了良好的游…

移动公厕有无人显示屏为何多采用RS485、IO信号通讯方式

在户外活动、临时集会或是应急情况下&#xff0c;移动公厕作为解决人们生理需求的重要设施&#xff0c;发挥着不可替代的作用。然而&#xff0c;随着人口密度的增加和对公共卫生要求的提高&#xff0c;如何确保移动公厕的高效利用和良好维护&#xff0c;成为了组织者和管理者面…

牛客周赛 Round 50 解题报告 | 珂学家

前言 题解 数学场&#xff0c;对数学头痛, T_T. A. 小红的最小最大 题型: 签到 a, b, x list(map(int, input().split()))if min(a, b) x > max(a, b):print ("YES") else:print ("NO")B. 小红的四则运算&#xff08;easy&#xff09; 思路: 贪心…

嵌入式通信协议全解析:SPI、I²C、UART详解(附带面试题)

目录 一、什么是通信 二、 通信的分类 同步通信&#xff08;Synchronous Communication&#xff09; 异步通信&#xff08;Asynchronous Communication&#xff09; 不同协议标准区分图&#xff1a; UART UART的特点&#xff1a; UART的通信过程&#xff1a; UART的配置…

文件防止拷贝如何实现?这些攻略给你了

在信息爆炸的时代&#xff0c;数据安全成为企业和个人不可忽视的重要环节。文件的非法拷贝不仅可能侵犯知识产权&#xff0c;还可能导致敏感信息的泄露&#xff0c;进而引发严重的后果。 因此&#xff0c;了解并掌握文件防止拷贝的方法和技术至关重要。本文将详细介绍几种常见…

【多线程】wait()和notify()

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 为什么需要wait()方法和notify()方法&#xff1f;2. wait()方法2.1 wait()方法的作用2.2 wait()做的事情2…

OpenBayes 教程上新 | 清华大学强推!YOLOv10 实现更高效的目标检测

过去几年中&#xff0c;由于 YOLO 在计算成本和检测性能之间的有效平衡&#xff0c;它已经成为实时目标检测领域的主要范式。然而&#xff0c;YOLO 依赖于非极大值抑制 (NMS) 进行后处理&#xff0c;这阻碍了 YOLO 的端到端部署&#xff0c;并对推理延迟产生了不利影响。 YOLO…

SpringBootV12和mybatis全部知识点

框架: 快速开发项目的一个架子 ssh ssm spring --> applicationContext.xml配置文件(spring不是业务层,是管理其他框架的) springmvc --> springmvc.xml配置文件 (对应之前servlet) mybatis —> mybatis-config.xml配置文件(对应之前jdbc) —> springboot优化…

【AI技术的未来之路】从模型到应用,跨越超级应用陷阱,迈向个性化智能体

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《热点时事》 期待您的关注 ​ 目录 引言 一、AI技术应用场景探索&#xff1a; 二、避免超级应用陷阱的策略&#xff1a; 三、个…

【STM32】MDK的编译过程及文件类型全解

1.编译过程简介 编译&#xff1a;MDK软件使用的编译器是armcc和armasm&#xff0c; 它们根据每个c/c和汇编源文件编译成对应的以“.o”为后缀名的对象文件(Object Code&#xff0c;也称目标文件)&#xff0c; 其内容主要是从源文件编译得到的机器码&#xff0c;包含了代码、数据…

无线网卡怎么连接台式电脑?让上网更便捷!

随着无线网络的普及&#xff0c;越来越多的台式电脑用户希望通过无线网卡连接到互联网。无线网卡为台式电脑提供了无线连接的便利性&#xff0c;避免了有线网络的束缚。本文将详细介绍无线网卡怎么连接台式电脑的四种方法&#xff0c;包括使用USB无线网卡、内置无线网卡以及使用…