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

Vue3学习笔记(n.0)

vue指令之v-for

首先创建自定义组件(practice5.vue):

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-05 21:28:45* @LastEditors: Mei* @LastEditTime: 2024-07-05 21:35:40* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><div id="myList" v-for="(item,index) in arr" :key="index">{{ item.name }}</div></div></template><script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom,提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{data(){return{arr:[{name:"张三"},{name:"李四"},{name:"王五"}]}}
}</script><style scoped>
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
</style>

然后再App.Vue中进行引入使用

最后运行结果为:

在使用v-for渲染列表时有几个注意点:

①循环的时候需要加key
1、作用
1.key的作用主要是为了高效的更新虚拟DOM,提高渲染性能。
2.key属性可以避免数据混乱的情况出现。
2、原理
1.vue实现了一套虚拟DOM,使我们可以不直接操作DOM元素只操作数据,就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法
2.当页面数据发生变化时,Diff算法只会比较同一层级的节点;
3.如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点后面的子节点;如果节点类型相同,则会重新设置该节点属性,从而实现节点更新
4.使用key给每个节点做一个唯一标识,Diff算法就可以正确识别此节点,"就地更新"找到正确的位置插入新的节点
3、注意
1.key 的值只能是字符串或数字类型
2. key 的值必须具有唯一性(即:key 的值不能重复)
3.建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
4.使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性,实际项目中如果没有id,推荐使用index)
5.建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

所以,简而言之,在实际的开发中,上面的数组列表一般是后端返回出来的数据,我们需要使用v-for将这些数据进行渲染,但是在使用v-for的时候也必须要加key,并且key的取值要有唯一性,一般都是数据的ID,比如学生列表的学生ID,或商品列表中的商品ID。这样我们在操作这个列表中就不会出现数据混乱的情况。

相关文章:

Vue3学习笔记(n.0)

vue指令之v-for 首先创建自定义组件&#xff08;practice5.vue&#xff09;&#xff1a; <!--* Author: RealRoad1083425287qq.com* Date: 2024-07-05 21:28:45* LastEditors: Mei* LastEditTime: 2024-07-05 21:35:40* FilePath: \Fighting\new_project_0705\my-vue-app\…...

基于Spring Boot的在线考试系统

您好&#xff01;我是专注于计算机技术研究的码农小野。如果您对在线考试系统感兴趣或有相关开发需求&#xff0c;欢迎随时联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Spring Boot框架&#xff0c;Java技术 工具&#xff1a;Eclipse&…...

Day65 代码随想录打卡|回溯算法篇---组合总和II

题目&#xff08;leecode T40&#xff09;&#xff1a; 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含…...

C++ 入门03:函数与作用域

往期回顾&#xff1a; C 入门01&#xff1a;初识 C-CSDN博客C 入门02&#xff1a;控制结构和循环-CSDN博客 一、前言 在前面的文章学习中&#xff0c;我们了解了C语言的基础&#xff0c;包括如何定义变量来存储数据&#xff0c;以及如何利用输入输出流实现程序与用户之间的无缝…...

在Linux/Debian/Ubuntu中出现“Could not get lock /var/lib/dpkg/lock-frontend”问题的解决办法

在Linux/Debian/Ubuntu中出现“Could not get lock /var/lib/dpkg/lock-frontend”问题的解决办法 在使用 apt 或 apt-get 进行软件包管理时&#xff0c;有时会遇到以下错误提示&#xff1a; Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporari…...

odoo中的钩子 Hooks

钩子 钩子&#xff08;Hooks&#xff09;是一种在特定时间点或特定事件发生时执行自定义代码的机制。它们允许开发者在不修改核心代码的情况下&#xff0c;为Odoo添加自定义功能或扩展现有功能。以下是关于Odoo钩子的一些关键点和常见用法&#xff1a; 一、钩子的类型 pre_i…...

05.C1W4.Machine Translation and Document Search

往期文章请点这里 目录 OverviewWhat you’ll be able to do!Learning Objectives Transforming word vectorsOverview of TranslationTransforming vectors Align word vectorsSolving for RFrobenius normFrobenius norm squaredGradient K nearest neighborsFinding the tr…...

计算机网络——数据链路层(点对点协议PPP)

点对点协议PPP的概述 对于点对点的链路&#xff0c;目前使用得最广泛的数据链路层协议是点对点协议 PPP (Point-to-Point Protocol)。 它主要应用于两个场景&#xff1a; 用户计算机与ISP之间的链路层协议就是点对点协议 PPP&#xff0c;1999年公布了回以在以太网上运行的PPP协…...

信息安全概述

名词解释 大数据&#xff1a;指的是所涉及的资料量规模巨大到无法透过主流软件工具&#xff0c;在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。 云计算&#xff1a;是指通过网络提供计算资源&#xff08;如服务器、存储、数据库、软件开发…...

UE5.3-基础蓝图类整理一

常用蓝图类整理&#xff1a; 1、获取当前关卡名&#xff1a;Get Current LevelName 2、通过关卡名打开关卡&#xff1a;Open Level(by name) 3、碰撞检测事件&#xff1a;Event ActorBeginOverlap 4、获取当前player&#xff1a;Get Player Pawn 5、判断是否相等&#xff1…...

Python面试题: 如何在 Python 中实现一个线程池?

在 Python 中&#xff0c;实现线程池可以使用内置的 concurrent.futures 模块&#xff0c;该模块提供了一个高层次的接口来管理并发任务。ThreadPoolExecutor 类是实现线程池的主要工具。以下是一些使用示例&#xff0c;展示如何在 Python 中实现和使用线程池&#xff1a; 1. …...

☺初识c++(语法篇)☺

目录 一命名空间&#xff08;namespace&#xff09;&#xff1a; 二cout与cin简述&#xff1a; 三缺省参数&#xff1a; 四函数重载&#xff1a; 五引用&#xff1a; 六内联函数: 七c中的nullptr简述&#xff1a; 一命名空间&#xff08;namespace&#xff09;&#xff1…...

process.env 管理 Vue 项目的环境变量(Vue项目中环境变量的配置及调用)

简述&#xff1a;在构建 Vue 应用时&#xff0c;管理配置是开发中的一个重要部分。不同的环境&#xff08;如开发、测试和生产&#xff09;往往需要不同的配置&#xff0c;例如 API、 基础 URL、第三方服务的密钥等。使用环境变量可以帮助我们更好地管理这些配置。这里将介绍如…...

算法工程师第六天(● 454.四数相加II ● 383. 赎金信 ● 15. 三数之和 ● 18. 四数之和 ● 总结 )

参考文献 代码随想录 一、四数相加 II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#…...

笔记:Newtonsoft.Json 自定义一个根据typeconverter转换的JsonConverter

在 Newtonsoft.Json 中创建一个根据 TypeConverter 转换的 JsonConverter 允许你在序列化和反序列化过程中利用 .NET 的 TypeConverter 机制。这种方式特别有用&#xff0c;当你想要为不直接支持 JSON 序列化的类型提供自定义的序列化逻辑时&#xff0c;比如第三方库中的类型或…...

第241题| 确定极限中参数问题 | 武忠祥老师每日一题

解题思路&#xff1a;确定极限中的参数的方法是求这个极限&#xff1b;求极限根据类型选方法。 形可以用到三种方法&#xff1a;洛必达&#xff0c;等价&#xff0c;泰勒。 先观察题目&#xff0c;将看成一个整体&#xff0c;同时,并令,整理之后如下&#xff1a; 这里也要想办…...

线程池【开发实践】

文章目录 一、为什么要用线程池1.1 单线程的问题1.2 手动创建多线程的问题1.3 线程池的作用&#xff08;优点&#xff09;1.4 线程池的使用场景 二、线程池的基础知识2.1 线程池的核心组件2.2 JUC中的线程池架构2.3 线程池的配置参数2.4 线程池常见的拒绝策略&#xff08;可自定…...

论文辅助笔记:ST-LLM

1 时间嵌入 2 PFA&#xff08;Partial Frozen Architecture&#xff09; 3 ST_LLM 3.1 初始化 3.2 forward...

加入运动健康数据开放平台,共赢鸿蒙未来

HarmonyOS SDK运动健康服务&#xff08;Health Service Kit&#xff09;是为华为生态应用打造的基于华为帐号和用户授权的运动健康数据开放平台。在获取用户授权后&#xff0c;开发者可以使用运动健康服务提供的开放能力获取运动健康数据&#xff0c;基于多种类型数据构建运动健…...

企业化运维(7)_Zabbix企业级监控平台

官网&#xff1a;Zabbix :: The Enterprise-Class Open Source Network Monitoring Solution ###1.Zabbix部署### &#xff08;1&#xff09;zabbix安装 安装源 修改安装路径为清华镜像 [rootserver1 zabbix]# cd /etc/yum.repos.d/ [rootserver1 yum.repos.d]# vim zabbix.r…...

开发者专属OpenClaw配置:nanobot镜像对接VSCode插件开发

开发者专属OpenClaw配置&#xff1a;nanobot镜像对接VSCode插件开发 1. 为什么选择nanobot镜像进行VSCode插件开发 去年我在开发一个智能代码补全插件时&#xff0c;发现市面上大多数AI辅助工具都存在响应延迟高、隐私性差的问题。直到接触到OpenClaw生态下的nanobot镜像&…...

避坑指南:为什么你的Jetson开发板apt安装Perf总是失败?

深度解析&#xff1a;Jetson开发板为何无法直接安装Perf及高效解决方案 在嵌入式开发领域&#xff0c;Nvidia Jetson系列凭借其强大的AI计算能力成为边缘计算的热门选择。然而当开发者尝试在这类设备上使用标准Ubuntu方法安装性能分析工具Perf时&#xff0c;往往会遭遇意想不到…...

STM32F103C8T6 HAL库驱动HC-SR04:用输入捕获双通道模式,精准测距不翻车

STM32F103C8T6 HAL库双通道捕获HC-SR04&#xff1a;高精度测距的工程实践 在智能小车避障、工业液位检测等嵌入式应用中&#xff0c;超声波测距模块的稳定性直接决定系统可靠性。传统单通道捕获方案常因计数器溢出、中断响应延迟等问题导致测量误差&#xff0c;而双通道输入捕获…...

省token秘籍:OpenClaw+nanobot镜像长文本处理优化方案

省token秘籍&#xff1a;OpenClawnanobot镜像长文本处理优化方案 1. 当长文本遇上大模型&#xff1a;我的token焦虑症 第一次尝试用OpenClaw处理公司三年的技术文档归档时&#xff0c;我看着账单倒吸一口凉气——单次50万token的消耗让我的个人预算瞬间见底。这促使我开始探索…...

GIL已死,GIL万岁?——2024大厂Python并发岗面试题库首发(含性能压测对比数据)

第一章&#xff1a;GIL已死&#xff0c;GIL万岁&#xff1f;——2024大厂Python并发岗面试题库首发&#xff08;含性能压测对比数据&#xff09;一道高频真题&#xff1a;为什么 asyncio.run() 启动的协程无法被 multiprocessing.Process 并发执行&#xff1f; 该问题直指 Pyth…...

人血小板裂解液(hPL)与细胞治疗生产工具解析:Sexton产品应用综述【曼博生物官方代理Sexton】

摘要&#xff1a;人血小板裂解液&#xff08;hPL&#xff09;作为无动物源培养补充剂&#xff0c;正在逐步替代FBS应用于细胞与基因治疗&#xff08;CGT&#xff09;领域。本文结合相关产品体系&#xff0c;对hPL及细胞冻存与灌装系统进行系统梳理。 关键词&#xff1a;人血小板…...

Qwen3-VL-8B数据库课程设计:构建一个多模态商品智能检索系统

Qwen3-VL-8B数据库课程设计&#xff1a;构建一个多模态商品智能检索系统 最近有个学弟跑来问我&#xff0c;说数据库课程设计不知道做什么好&#xff0c;想做个有技术含量又能拿高分的项目。我给他提了个建议&#xff0c;用现在很火的多模态大模型&#xff0c;结合传统的数据库…...

SDMatte惊艳效果展示:高清透明PNG在海报/PPT/详情页真实复用案例

SDMatte惊艳效果展示&#xff1a;高清透明PNG在海报/PPT/详情页真实复用案例 1. 为什么你需要关注SDMatte 在日常设计工作中&#xff0c;抠图可能是最耗时但又必不可少的环节。无论是制作电商详情页、设计海报还是准备PPT素材&#xff0c;一个高质量的透明背景图片往往能大幅…...

java rabbitmq实现消息协作

场景&#xff1a;数据下载采用rpa实现&#xff0c;数据服务采用java springboot实现&#xff0c;需要进行一键数据补录操作1、设置消息承载的通信队列&#xff0c;java 发送任务到rabbitmq和rpa端收到消息&#xff08;neimeng_data_download&#xff09;后&#xff0c;将下载结…...

Swift-All镜像入门:手把手教你快速部署,无需配置轻松上手

Swift-All镜像入门&#xff1a;手把手教你快速部署&#xff0c;无需配置轻松上手 想体验600大模型和300多模态模型的强大能力&#xff0c;却被复杂的安装配置劝退&#xff1f;Swift-All镜像就是为你准备的"开箱即用"解决方案。本文将带你从零开始&#xff0c;一步步…...