当前位置： 首页 > news >正文

vue学习之 v-for key

news 文章来源：https://blog.csdn.net/qq_36940806/article/details/132797867 2025/1/12 23:10:18

v-for key

  • Vue使用 v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM元素来匹配数据项的顺序，而是就地更新每个元素。
  • 创建 demo9.html,内容如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入 vue 脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><!-- DOM区域 --><div id="app"><div><input type="text" v-model="name"><button @click="addUser">添加</button></div><ul><li v-for="(user,i) in userList"><input type="checkbox" /> index: {{i}} name: {{user.name}}</li></ul></div></body>
<script>const vm = {data: function() {return {userList: [{id: 1,name: 'zs'}, {id: 2,name: 'ls'}, {id: 3,name: 'ww'}, ]}},methods: {addUser() {this.userList.unshift({id: this.nextId,name: this.name})this.name = ''this.nextId++}},}const app = Vue.createApp(vm)app.mount('#app')
</script></html>

效果展示

  • 发现，当勾选了zs时，再添加用户，选中的并不是zs
    在这里插入图片描述

解决办法

  • 为每项提供一个唯一 key，让Vue能跟踪每个节点的身份，从而重用和重新排序现有元素
  • 内容修改如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入 vue 脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><!-- DOM区域 --><div id="app"><div><input type="text" v-model="name"><button @click="addUser">添加</button></div><ul><li v-for="(user,i) in userList" :key="user.id"><input type="checkbox" /> index: {{i}} name: {{user.name}}</li></ul></div></body>
<script>const vm = {data: function() {return {userList: [{id: 1,name: 'zs'}, {id: 2,name: 'ls'}, {id: 3,name: 'ww'}, ]}},methods: {addUser() {this.userList.unshift({id: this.nextId,name: this.name})this.name = ''this.nextId++}},}const app = Vue.createApp(vm)app.mount('#app')
</script></html>

效果展示

在这里插入图片描述

相关文章：

vue学习之 v-for key

v-for key Vue使用 v-for渲染的元素列表时&#xff0c;它默认使用“就地更新”的策略。如果数据项的顺序被改变&#xff0c;Vue 将不会移动 DOM元素来匹配数据项的顺序&#xff0c;而是就地更新每个元素。创建 demo9.html,内容如下 <!DOCTYPE html> <html lang"…...

编程日记 2023/9/12 17:13:13

ARM接口编程—IIC总线(exynos 4412平台)

IIC总线简介 IIC总线是Philips公司在八十年代初推出的一种串行、半双工总线 主要用于近距离、低速的芯片之间的通信&#xff1b;IIC总线有两根双向的信号线一根数据线SDA用于收发数据&#xff0c;一根时钟线SCL用于通信双方时钟的同步&#xff1b;IIC总线硬件结构简单&#xff…...

编程日记 2023/9/12 17:12:12

ReactNative进阶（二十一）开源插件 react-native-device-info 获取设备信息

文章目录 一、前言二、拓展阅读 一、前言 项目开发过程中&#xff0c;需要获取设备信息&#xff0c;例如获取设备名称。可通过使用开源的第三方组件react-native-device-info&#xff0c;该组件适用于iOS和Android双平台。 在ReactNative项目中可通过npm命令下载 react-nativ…...

编程日记 2023/9/12 17:11:11

MySql学习笔记05——DML

DML 插入数据insert insert into 表名(字段名1&#xff0c;字段名2&#xff0c;字段名3...)values(值1&#xff0c;值2&#xff0c;值3)&#xff1b;字段名和值要一一对应&#xff08;顺序对应&#xff0c;数据类型对应&#xff09; insert into t_student(no,name,sex,age,…...

编程日记 2023/9/12 17:10:10

halcon对图片进行处理基础

实例图片 C:\Users\Public\Documents\MVTec\HALCON-19.11-Progress\examples\images*读取图片 read_image (Image1, D:/c/image/1.png) *读取大小 get_image_size(Image1,Width, Height) *创建窗口 dev_close_window() dev_open_window(0, 0, Width, Height, black, WindowHan…...

编程日记 2023/9/12 17:09:09

element-ui在vue中如何实现校验两个复选框至少选择一个！

整体进行验证 想验证至少选择一个复选框&#xff0c;可以将这两个复选框视为一个整体进行验证。在 Element UI 中&#xff0c;可以使用自定义验证规则来实现这一点。 你可以在 rules 对象中定义一个自定义的验证规则来检查 isCheck1 和 isCheck2 至少有一个被选中。 以下是一…...

编程日记 2023/9/12 17:08:08

DeepinV20/Ubuntu安装postgresql方法

首先&#xff0c;建议看一下官方的安装文档PostgreSQL: Linux downloads (Ubuntu) PostgreSQL Apt Repository 简单的说&#xff0c;就是Ubuntu下的Apt仓库&#xff0c;可以用来安装任何支持版本的PgSQL。 If the version included in your version of Ubuntu is not the one…...

编程日记 2023/9/12 17:07:07

汽车ECU软件升级方案介绍

软件OTA的背景 随着汽车网联化的发展，现在的汽车电子架构都支持软件空中升级，即大家常说的OTA（Software Update and Upgrade Over the Air），传统的软件升级常常是离线升级，需要车主将车开到维修保养中心进行软件更新。不过OTA升级方式带来方便之处需要考虑的问题也随之增…...

编程日记 2023/9/12 17:06:06

首家！亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试

近日&#xff0c;在中国信通院“可信数据库”数据库迁移工具专项测试中&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧科技&#xff09;数据库数据同步平台V2.1产品依据《数据库迁移工具能力要求》、结合亚信科技AntDB分布式关系型数据库产品&…...

编程日记 2023/9/12 17:05:04

为什么好多人想辞职去旅行？

一、“世界那么大,我想去看看。” 这句话成为了网络上的一句流行语。这句话的出处就是在一位女教师的一份辞职申请上,这样的辞职理由是多少人想干却不敢干的事情。这句话的流行&#xff0c;反映了现代社会中人们对于探索未知世界和追求个人梦想的渴望。在这个快速发展的时代&am…...

编程日记 2023/9/12 17:04:03

vim的使用介绍以及命令大全

懒羊羊感谢大家的关注和三连支持~ 目录 前言 一、vim的使用介绍 二、命令大全 1.命令模式 &#xff08;1&#xff09;复制&#xff08;配合粘贴命令p使用&#xff09; &#xff08;2&#xff09;剪切 &#xff08;3&#xff09;粘贴 &#xff08;4&#xff09;删除 …...

编程日记 2023/9/12 17:03:03

JavaScript高级技巧：深入探索JavaScript语言的高级特性和用法

当我们谈论JavaScript高级技巧时&#xff0c;以下是一些示例来说明这些概念&#xff1a; 闭包&#xff08;Closures&#xff09;&#xff1a; function outerFunction() {var outerVariable Hello;function innerFunction() {console.log(outerVariable);}return innerFunct…...

编程日记 2023/9/12 17:02:01

虹科方案|HK-Edgility利用边缘计算和VNF降本增效

一、边缘计算和 VNF 在当今瞬息万变的数字环境中&#xff0c;边缘虚拟化网络功能&#xff08;VNF&#xff09;是一个既能够优化网络基础设施&#xff0c;又能控制成本的创新型解决方案。它使客户能够将多个基于软件的 VNF 整合到一个专用计算设备上。更值得高兴的是&#xff0c…...

编程日记 2023/9/12 17:01:01

SpringBoot项目--电脑商城【新增收货地址】

1.新增收货地址 t_address CREATE TABLE t_address (aid INT AUTO_INCREMENT COMMENT 收货地址id,uid INT COMMENT 归属的用户id,name VARCHAR(20) COMMENT 收货人姓名,province_name VARCHAR(15) COMMENT 省-名称,province_code CHAR(6) COMMENT 省-行政代号,city_name VARC…...

编程日记 2023/9/12 16:59:59

[HNCTF 2022 Week1]——Web方向 详细Writeup

Week1 [HNCTF 2022 Week1]2048 f12查看源代码 可以看出游戏的分数是score 修改score的值 得到flag [HNCTF 2022 Week1]Interesting_include 得到源码 <?php //WEB手要懂得搜索 //flag in ./flag.phpif(isset($_GET[filter])){$file $_GET[filter];if(!preg_match(&qu…...

编程日记 2023/9/12 16:58:58

3dmax vray如何创建真实的灯光？3dmax vray 室内照明教程

为什么良好的照明很重要&#xff1f; 通过仔细操纵光源并利用 V-Ray 的功能&#xff0c;您将解锁制作超越普通渲染的能力&#xff0c;让观众着迷。每个阴影和每个高光都有一个目的 - 通过注意掌握照明&#xff0c;您的渲染将变得栩栩如生&#xff0c;并为您的室内设计赋予独特…...

编程日记 2023/9/12 16:57:58

如何在本地使用Docker搭建和运行Kubernetes集群

文章目录 1. 准备环境2. 安装Minikube3. 启动Minikube集群4. 验证集群5. 部署一个示例应用创建一个Deployment部署应用检查部署 6. 访问应用创建一个Service部署Service获取Service的访问地址 7. 清理资源结论 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN…...

编程日记 2023/9/12 16:56:57

每天几道Java面试题（第二天）

目录 第二幕、第一场&#xff09;公司前台第二场&#xff09;公司卫生间 友情提醒 背面试题很枯燥&#xff0c;加入一些戏剧场景故事人物来加深记忆。PS:点击文章目录可直接跳转到文章指定位置。 第二幕、 第一场&#xff09;公司前台 【接待人员埃斯卡莱罗&#xff0c;面试…...

编程日记 2023/9/12 16:55:55

Java | 线程的生命周期和安全

不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始&#xff0c;不如现在行动&#xff01; &#x1f334;线程的生命周期 sleep方法会让线程睡眠&#xff0c;睡眠时间到了之后&#xff0c;立马就会执行下面的代码吗&#xff1f; 答&#xff1a;不会&am…...

编程日记 2023/9/12 16:54:54

Bootstrap的一些主要作用

Bootstrap是一个流行的前端开发框架&#xff0c;它主要用于快速构建响应式、移动优先的网站和网络应用程序。它提供了一套CSS样式和JavaScript插件&#xff0c;帮助开发者轻松地创建漂亮、一致和交互丰富的用户界面。 以下是Bootstrap的一些主要作用&#xff1a; 响应式布局&a…...

编程日记 2023/9/12 16:53:52

网络编程套接字 | UDP套接字

前面的文章中我们叙述了网络编程套接字的一些预备知识点&#xff0c;从本文开始我们就将开始UDP套接字的编写。本文中的服务端与客户端都是在阿里云的云服务器进行编写与测试的。 udp_v1 在v1的版本中我们先来使用一下前面讲过得一些接口&#xff0c;简单的构建一个udp服务器…...

编程日记 2023/9/12 16:52:51

网络层IP协议

目录 前言 1.如何理解IP协议 2.IP协议格式 3.网段划分 4.特殊的IP地址 5.IP地址的数量限制 6.私有IP地址和公网IP地址 7.路由 总结 前言 在前面的文章中介绍了关于传输层常用的两个协议&#xff0c;UDP协议和TCP协议&#xff0c;当数据经过传输层之后&#xff0c;进入网…...

编程日记 2023/9/12 16:51:50

C++ Day4

目录 仿照string类&#xff0c;完成myString 类 思维导图 仿照string类&#xff0c;完成myString 类 #include <iostream> #include<cstring>using namespace std;class myString {private:char *str; //记录c风格的字符串int size; //记录…...

编程日记 2023/9/12 16:50:49

2024字节跳动校招面试真题汇总及其解答（二）

1. 微服务的好处，划分原则 微服务是软件架构的一种模式，它将应用程序划分为一系列小型、独立的服务。每个服务都提供一个单独的功能，并使用轻量级的接口相互通信。 微服务架构具有以下好处： 灵活性：微服务可以独立部署、扩展和更新，这使得它们能够随着业务需求的变化而…...

编程日记 2023/9/12 16:49:48

SpringBoot集成websocket（4）|（使用okhttp3实现websocket）

SpringBoot集成websocket&#xff08;4&#xff09;|&#xff08;使用okhttp3实现websocket&#xff09; 文章目录 SpringBoot集成websocket&#xff08;4&#xff09;|&#xff08;使用okhttp3实现websocket&#xff09;[TOC] 前言一、实现步骤1.实现步骤 二、websocket服务代…...

编程日记 2023/9/12 16:48:48

【MySQL】JDBC编程

MySQL-JDBC编程 文章目录 MySQL-JDBC编程Java的数据库编程JDBC工作原理JDBC的使用驱动包下载导入代码编写 Java的数据库编程 JDBC&#xff0c;即Java Database Connectivity&#xff0c;java数据库连接。是一种用于执行SQL语句的Java API&#xff0c;它是 Java中的数据库连接…...

编程日记 2023/9/12 16:47:47

数据结构——二叉树线索化遍历(前中后序遍历)

二叉树线索化 线索化概念&#xff1a; 为什么要转换为线索化 二叉树线索化是一种将普通二叉树转换为具有特殊线索&#xff08;指向前驱和后继节点&#xff09;的二叉树的过程。这种线索化的目的是为了提高对二叉树的遍历效率&#xff0c;特别是在不使用递归或栈的情况下进行遍历…...

编程日记 2023/9/12 16:46:45

GO语言网络编程（并发编程）Channel

GO语言网络编程&#xff08;并发编程&#xff09;Channel 1、Channel 1.1.1 Channel 单纯地将函数并发执行是没有意义的。函数与函数间需要交换数据才能体现并发执行函数的意义。 虽然可以使用共享内存进行数据交换&#xff0c;但是共享内存在不同的goroutine中容易发生竞态…...

编程日记 2023/9/12 16:45:44

c++day3

stack.h #ifndef STACK_H #define STACK_H #include <iostream> //#define max 128 using namespace std; class Stack { private:int* stack;//数组指针int top;//栈顶元素int max;//栈容量 public://构造函数Stack();//析构函数~Stack();//定义拷贝构造函数Stack(cons…...

编程日记 2023/9/12 16:44:42

算法通过村第六关-树青铜笔记|中序后序

文章目录 前言1. 树的常见概念2. 树的性质3. 树的定义与存储方式4. 树的遍历方式5. 通过序列构建二叉树5.1 前中序列恢复二叉树5.2 中后序列恢复二叉树 总结 前言 提示&#xff1a;瑞秋是个小甜心&#xff0c;她只喜欢被爱&#xff0c;不懂的去爱人。 --几米《你们 我们 他们》…...

编程日记 2023/9/12 16:43:40

合肥市做外贸网站的公司/百度一下官网

725. 分隔链表 给你一个头结点为 head 的单链表和一个整数 k &#xff0c;请你设计一个算法将链表分隔为 k 个连续的部分。 每部分的长度应该尽可能的相等&#xff1a;任意两部分的长度差距不能超过 1 。这可能会导致有些部分为 null 。 这 k 个部分应该按照在链表中出现的顺…...

编程日记 2025/1/12 18:53:11

wordpress 手机页面停/公司做个网站多少钱

>>>>>Unit 11.行提示符例如&#xff1a;[kioskfoundation0 Desktop]$kiosk ##打开shell的用户 ##分隔符foundation0 ##主机名称Desktop ##工作目录名称$ ##身份提示符&#xff0c;#表示超级用户&#xff0c;$表示普通用户注&#xff1a;命令要在行提示符之后输入…...

编程日记 2025/1/12 15:13:37

wordpress没有css样式表/百度游戏

您好&#xff0c;很高兴为您解答问题。您可以在提出问题之前先告诉我问题的主题&#xff0c;这样我就可以尽力为您提供最好的帮助了。...

编程日记 2025/1/12 13:55:48

大学城网站开发公司/廊坊seo

学习于&#xff1a; https://www.bilibili.com/video/av29268873/?p23 《鸟哥的linux私房菜》先让我们来看看进程的虚拟地址中的0~3g用户空间的存储&#xff1a;正文即代码段&#xff0c;初始化的数据段&#xff0c;未初始化的数据即bss段。bss段和初始化的数据段加在一起就是…...

编程日记 2025/1/12 9:38:12

亚马逊注册没有公司网站怎么做/小网站怎么搜关键词

Python 实现用户登录系统 案例 一&#xff08;基于hashlib & sys&#xff09;基于hashlib 库MD5算法对用户密码进行加密用户名和密码信息存储在内存中 import sys import hashlib"""实现一个用户登录系统&#xff0c;用户可以输入用户面进行用户的注册、用户…...

编程日记 2025/1/12 6:00:42

长沙公积金网站怎么做异动/关键词的选取原则

HBase之Rowkey设计总结及易观方舟实战篇 代立冬 2018-06-02 21:52:46 3466 收藏 10 最后发布:2018-06-02 21:52:46首发:2018-06-02 21:52:46分类专栏&#xff1a; --------【HBase优化】 ●HBase 大数据实战系列 版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循…...

编程日记 2025/1/12 4:23:29