五、Vue 循环语句
文章目录
- 简介
- 一、基础数组迭代
- 二、对象属性迭代
- 三、整数循环
简介
在 Vue.js 的世界里，当我们需要处理重复性的结构并依据数据动态渲染时，v-for 指令就成了不可或缺的工具，它赋予开发者简洁且强大的能力，轻松应对各种列表渲染场景。
一、基础数组迭代
v-for 指令运用一种独特且易于理解的语法 —— site in sites 形式，其中 sites 代表源数据所在的数组，而 site 则是在循环过程中对每个数组元素的便捷别名。这就好比给数组中的每个元素都取了个临时的小名，方便我们在模板中引用。
例如，当我们想要渲染一个网站名称列表时，代码如下：
<div id="app"><ol><li v-for="site in sites">{{ site.name }}</li></ol>
</div><script>
new Vue({el: '#app',data: {sites: [{ name: 'Runoob' },{ name: 'Google' },{ name: 'Taobao' }]}
})
</script>
在这个示例中，Vue.js 会自动遍历 sites 数组，针对每一个元素，取出其中的 name 属性，并将其渲染在对应的 < li> 标签内，最终呈现在页面上的就是一个有序的网站名称列表。
不仅如此，v-for 在模板运用上相当灵活，我们还可以结合 标签来实现更复杂的布局需求。就像下面这样：
<ul><template v-for="site in sites"><li>{{ site.name }}</li><li>--------------</li></template>
</ul>
这里， 标签作为一个不可见的容器，帮助我们组织多个需要重复渲染的元素结构，每一次循环都会完整地渲染其内部包含的 < li> 标签，使得列表项呈现出 “名称 + 分隔线” 的样式，丰富了展示效果。
二、对象属性迭代
除了数组，v-for 指令在处理对象时同样游刃有余。它能够精准地按照对象的属性来迭代数据，为我们提取和展示对象中的信息提供了极大便利。
假设有一个包含网站相关信息的对象：
<div id="app"><ul><li v-for="value in object">{{ value }}</li></ul>
</div><script>
new Vue({el: '#app',data: {object: {name: '菜鸟教程',url: 'http://www.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}
})
</script>
在上述代码中，v-for 会依次遍历 object 对象的属性值，将每个值单独渲染在 < li> 标签内，如此一来，页面上就会按顺序展示出对象的各个属性值，让信息呈现更加直观。
而 Vue.js 考虑得更为周全，它允许我们进一步获取属性的键名以及当前迭代的索引。只需在 v-for 表达式中稍作调整：
<div id="app"><ul><li v-for="(value, key) in object">{{ key }} : {{ value }}</li></ul>
</div>
此时，在循环过程中，不仅能获取到属性值 value，还能同步得到对应的键名 key，并按照 “键名：值” 的格式展示，这对于详细展示对象结构和数据关联尤为有用。
若再添加一个参数，还能获取到当前迭代的索引：
<div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul>
</div>
如此，呈现出来的列表项就变成了带有索引编号的格式，像 “0. name : 菜鸟教程”，这种方式在需要对列表项进行排序、标注序号或者根据索引执行特定逻辑时，显得格外便捷。
三、整数循环
令人惊喜的是，v-for 的能力还不止于此，它甚至可以直接对整数进行循环操作，这在一些需要生成固定数量的重复结构场景下非常实用。
比如，我们想要快速生成一个从 1 到 10 的数字列表：
<div id="app"><ul><li v-for="n in 10">{{ n }}</li></ul>
</div>
这里，v-for 会自动将整数 10 视为一个从 1 开始，到 10 结束（包含 10）的序列，逐一将数字渲染在 < li> 标签内，轻松实现了数字列表的生成，无需手动构建数组，大大简化了代码逻辑。
但在使用 v-for 时，尤其是在处理大型数据列表或者复杂对象迭代时，开发者还需留意性能问题。因为每一次 v-for 循环都会创建对应的 DOM 元素，若数据量过大，可能导致页面加载缓慢、卡顿等现象。此时，可以结合 Vue.js 的一些优化技巧，如使用 key 属性来帮助 Vue 精准识别每个列表项的身份，优化 DOM 更新效率，确保在享受 v-for 带来的便捷同时，维持页面的流畅性能。
相关文章：
五、Vue 循环语句
文章目录 简介一、基础数组迭代二、对象属性迭代三、整数循环 简介 在 Vue.js 的世界里，当我们需要处理重复性的结构并依据数据动态渲染时，v-for 指令就成了不可或缺的工具，它赋予开发者简洁且强大的能力，轻松应对各种列表渲染场景…...
HMSC联合物种分布模型
联合物种分布模型（Joint Species Distribution Modelling，JSDM）在生态学领域，特别是群落生态学中发展最为迅速，Hmsc是物种群落分层模型的缩写(Hierarchical Modelling of Species Communities)，它是一种基于…...
)
【CPU】risc-v指令集和其他指令集的差别(个人草稿)
第三，在 RISC-V 中对于所有指令，要读写的寄存器的标识符总是在同一位置，意味着在解码指令之前，就可以先开始访问寄存器。在许多其他的 ISA 中，某些指令字段在部分指令中被重用作为源目的地，在其他指令中又被…...
处理元素卡在视野边界，滚动到视野内
效果图如下： 本示例处理场景：点击底部的折叠面板，展开后移动端滚动条位置不变，导致展开内容在视图外。造成面板展开无内容的错觉。 处理核心API: IntersectionObserver 此API可绑定元素并监听元素是否在视野内。若在视野外…...
环,域,体,整区,理想,极大理想,
环： 定义： 加法交换群 乘法半群 分配律 域的定义： 加法交换群 乘法群（去掉0元是交换群） 分配律 Eg:比如整数集合不是域，因为对于乘法来说，去掉0后没有单位元了，但是是环 Eg…...
音视频入门基础：MPEG2-TS专题（22）——FFmpeg源码中，获取TS流的音频信息的实现
音视频入门基础：MPEG2-TS专题系列文章： 音视频入门基础：MPEG2-TS专题（1）——MPEG2-TS官方文档下载 音视频入门基础：MPEG2-TS专题（2）——使用FFmpeg命令生成ts文件 音视频入门基础…...
大模型—Ollama 结构化输出
Ollama 结构化输出 Ollama现在支持结构化输出，使得可以按照由JSON模式定义的特定格式来约束模型的输出。Ollama的Python和JavaScript库已经更新，以支持结构化输出。 结构化输出的用例包括： 从文档中解析数据从图像中提取数据结构化所有语言模型响应比JSON模式更可靠和一致开…...
基于Pytorch和yolov8n手搓安全帽目标检测的全过程
一.背景 还是之前的主题，使用开源软件为公司搭建安全管理平台，从视觉模型识别安全帽开始。主要参考学习了开源项目 https://github.com/jomarkow/Safety-Helmet-Detection，我是从运行、训练、标注倒过来学习的。由于工作原因，抽空…...
数据结构与算法基础（C语言版）
参考资料：https://www.bilibili.com/video/BV1GW421A7qY/ 所有代码均已在Ubuntu 20.04.6 LTS中测试通过 逻辑结构与存储结构 逻辑结构 逻辑结构指的是数据对象中数据元素间的相互关系，分为以下四种： 集合结构 集合结构中的数据元素除了同属于…...
Qt监控系统放大招/历经十几年迭代完善/多屏幕辅屏预览/多层级设备树/网络登录和回放
一、前言说明 近期对视频监控系统做了比较大的更新升级，主要就是三点，第一点就是增加了辅屏预览，这个也是好多个客户需要的功能，海康的iVMS-4200客户端就有这个功能，方便在多个屏幕打开不同的视频进行查看，…...
使用Locust对MySQL进行负载测试
1.安装环境 pip install locust mysql-connector-python 2.设置测试环境 打开MySQL服务 打开Navicat新建查询，输入SQL语句 3.编写locust脚本 load_mysql.py # codingutf-8 from locust import User, TaskSet, task, between import mysql.connector import ran…...
layui多图上传,tp8后端接收处理
环境：layui2.9.21\thinkphp8.1 前端代码： layui.use([upload, layer], function() {const upload layui.upload;const layer layui.layer;const $ layui.$;// 上传图片const uploadInstImage upload.render({elem: #uploadImage,url: /admin/demo/…...
【Rust自学】8.3. String类型 Pt.1：字符串的创建、更新与拼接
8.3.0. 本章内容 第八章主要讲的是Rust中常见的集合。Rust中提供了很多集合类型的数据结构，这些集合可以包含很多值。但是第八章所讲的集合与数组和元组有所不同。 第八章中的集合是存储在堆内存上而非栈内存上的，这也意味着这些集合的数据大小无需在编…...
Linux（Ubuntu）下ESP-IDF下载与安装完整流程（1）
本文主要看参考官网说明，如下： 快速入门 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 Linux 和 macOS 平台工具链的标准设置 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 一、安装准备 为了在ESP32-S3中使用ESP-IDF，需要根据操作系统安装一些软件包。可以参考以下安…...
Android性能优化—— 内存优化
Android 系统中，垃圾回收是自动的，比较隐蔽，这就导致一些内存问题表现的并不明显，出现问题后难以定位。常见的内存问题有内存泄漏、内存溢出（Out of Memory）、内存抖动等。 我们做内存优化的主要原因有以下…...
【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算
【MATLAB第111期】基于MATLAB的sobol全局敏感性分析方法二阶指数计算 一、简介 在MATLAB中计算Sobol二阶效应指数通常涉及到全局敏感性分析（Global Sensitivity Analysis, GSA），其中Sobol方法是一种流行的技术，用于评估模型输入…...
【Scala】图书项目系统代码演练3.1/BookService
package org.app package serviceimport models.{BookModel, BorrowRecordModel}import org.app.dao.{BookDAO, BorrowRecordDAO}import java.time.LocalDateTime import scala.collection.mutable.ListBuffer// 图书业务逻辑层 class BookService {private val bookDAO new B…...
Gateway
目录 使用 工作机制 Predicate断言 Filter过滤器（鉴权） GatewayFilter GlobalFilter 使用 Gateway底层是使用Ribbon来实现负载均衡的 新建模块，端口5001 1、引入依赖 spring-boot-starter-web里存在tomcat，spring-cloud-st…...
SpringSecurity中的过滤器链与自定义过滤器
关于 Spring Security 框架中的过滤器的使用方法，系列文章： 《SpringSecurity中的过滤器链与自定义过滤器》 《SpringSecurity使用过滤器实现图形验证码》 1、Spring Security 中的过滤器链 Spring Security 中的过滤器链（Filter Chain）是一个核心的概念，它定义了一系列过…...
【OTA】论文学习笔记--《基于RTOS的车载ECU双分区OTA升级技术分析报告》
引言 研究背景 - 汽车智能化、网联化发展趋势下，OTA升级已成为智能网联汽车的必备功能 - 传统RTOS控制器在OTA升级失败后无法进行软件回滚，导致控制器功能失效 - 现有技术主要针对Linux、QNX等智能操作系统，缺乏针对RTOS的解决方案 研究目的 提出一种适用于RTOS控制器的双分…...
MLA：多头潜在注意力
MLA：多头潜在注意力 多头潜在注意力（MLA）机制是一种在深度学习模型中用于处理序列数据的注意力机制的改进形式，以下是对其原理和示例的详细介绍： 原理 低秩键值联合压缩：MLA机制利用低秩键值联合压缩来消除注意力模块中的某些计算，从而提高模型的运行速度和性能。在传…...
【python】matplotlib（moon cake）
文章目录 1、Style12、Style23、Style34、Style45、Style56、Style67、Style78、参考的库函数matplotlib.patches.Arcmatplotlib.patches.Wedge 9、参考 1、Style1 """ author: tyran """from numpy import sin, cos, pi import matplotlib.pyp…...
C++ hashtable
文章目录 1. 基本概念2. 哈希函数3. 哈希冲突及解决方法开放定址法链地址法再哈希法建立公共溢出区4. 哈希表的操作实现5. 内存管理及优化 时间复杂度理想情况（无哈希冲突或冲突极少）一般情况（考虑哈希冲突及解决方法）综合来看 以…...
ip怎么查域名?IP和域名分别是什么?
为什么我们可以通过简单的域名访问网站，而不是记住一串复杂的数字？IP地址和域名之间到底是什么关系？在互联网的世界里，IP地址和域名是两种重要的概念，它们共同构成了我们日常上网的基础。 IP地址是互联网协议地址的缩…...
大模型提示词初探
大模型提示词初探 在与大模型交互的过程中，提示词起着至关重要的作用，它犹如给模型下达的精准任务指令，直接影响着模型生成内容的准确性、高效性与合理性。合理运用提示词，能够有效减少模型出现错误和幻觉的情况，从而…...
Linux的进程替换以及基础IO
进程替换 上一篇草率的讲完了进程地址空间的组成结构和之间的关系，那么我们接下来了解一下程序的替换。 首先，在进程部分我们提过了，其实文件可以在运行时变成进程，而我们使用的Linux软件其实也是一个进程，所以进一步…...
《Vue进阶教程》第三十一课：ref的初步实现
往期内容： 《Vue进阶教程》第二十课：lazy懒执行 《Vue进阶教程》第二十一课：支持缓存 《Vue进阶教程》第二十二课：自定义更新(调度器) 《Vue进阶教程》第二十三课：渲染计算属性的结果 《Vue进阶教程》第二十四课&…...
)
Wend看源码-Java-集合学习(Queue)
概述 Wend看源码-Java-集合学习(List)-CSDN博客 Wend看源码-Java-集合学习(Set)-CSDN博客 在前两篇文章中，我们分别探讨了Java集合框架的父类以及List集合和Set集合的实现。接下来，本文将重点阐述Java中的Queue集合，包括其内部的数据结…...
大数据面试笔试宝典之HBase面试
1.HBase 数据存储位置 HBase 中的数据存储在哪里？ 以什么格式存储？和 Zookeeper 什么关系？ 参考答案： 1.HBase 中的所有数据文件都存储在 Hadoop HDFS 文件系统上。 2.包含两种文件类型： HFile ： HBase 中 KeyValue 数据的存储格式。HFile 是 Hadoop 的二进制格式文件…...
React基础知识学习
学习React前端框架是一个系统而深入的过程，以下是一份详细的学习指南： 一、React基础知识 React简介 React是一个用于构建用户界面的JavaScript库，由Facebook开发和维护。它强调组件化和声明式编程，使得构建复杂的用户界面变得更…...
实战指南：Shiro、CAS打造完美单点登录体验
引言 想象一下，在日常工作中，我们经常需要进行系统认证和授权。当用户尝试登录一个网站时，他们需要提供用户名和密码，网站会检查这些信息，确认用户是谁。这就是认证的过程。 一旦用户被认证，他们可能会尝…...
光储充一体化解决方案详解。
一、光储充介绍 1、什么是光储充 “光储充”一体化，顾名思义，是由光伏发电、储能、充电集成一体、互相协调支撑的绿色充电模式。其工作原理是利用光伏发电，余电由储能设备存储，共同承担供电充电任务。在用电高峰，光储…...
TDengine 新功能 VARBINARY 数据类型
1. 背景 VARBINARY 数据类型用于存储二进制数据，与 MySQL 中的 VARBINARY 数据类型功能相同，VARBINARY 数据类型长度可变，在创建表时指定最大字节长度，使用进按需分配存储，但不能超过建表时指定的最大值。 2. 功能说明…...
)
2024年秋词法分析作业(满分25分)
【问题描述】 请根据给定的文法设计并实现词法分析程序，从源程序中识别出单词，记录其单词类别和单词值，输入输出及处理要求如下： （1）数据结构和与语法分析程序的接口请自行定义；类别码需按下表格…...
AF3 checkpoint_blocks函数解读
checkpoint_blocks 函数实现了一种分块梯度检查点机制 (checkpoint_blocks)，目的是通过分块（chunking）执行神经网络模块，减少内存使用。在深度学习训练中，梯度检查点（activation checkpointing）是一种显存优化技术。该代码可以： 对神经网络的块（blocks）按需分块，并对…...
VITUREMEIG | AR眼镜 算力增程
根据IDC发布的《2024年第三季度美国AR/VR市场报告》显示，美国市场AR/VR总出货量增长10.3%。其中，成立于2021年的VITURE增长速度令人惊艳，同比暴涨452.6%，成为历史上增长最快的AR/VR品牌。并在美国AR领域占据了超过50%的市场份额&a…...
详解MySQL在Windows上的安装
目录 查看电脑上是否安装了MySQL 下载安装MySQL 打开MySQL官网，找到DOWNLOADS 然后往下翻，找到MySQL Community(GPL) Downloads>> 然后找到MySQL Community Server 然后下载，选择No thanks,just start my download. 然后双击进行…...
细说STM32F407单片机CAN基础知识及其HAL驱动程序
目录 一、CAN总线结构和传输协议 1、 CAN总线结构 （1）闭环结构的CAN总线网络 （2）开环结构的CAN总线网络 （3）隐性电平和显性电平 2、CAN总线传输协议 （1）CAN总线传输特点 &am…...
Ubuntu 22.04 升级 24.04 问题记录
一台闲置笔记本使用的 ubuntu 还是 18.04，最近重新使用，发现版本过低，决定升级，于是完成了 18.04 -> 20.04 -> 22. 04 -> 24.04 的三连跳。 一、升级过程中黑屏 主要问题是在 22.04 升级到 24.04 过程中出现了黑屏仅剩…...
模型选择+过拟合欠拟合
训练误差和泛化误差 训练误差：模型在训练数据上的误差 泛化误差：模型在新数据上的误差 验证数据集：一个用来评估模型好坏的数据集 例如拿出50%的数据作为训练 测试数据集：只能用一次 K则交叉验证 在没有足够数据时使用 算法…...
Leetcode 3404. Count Special Subsequences
Leetcode 3404. Count Special Subsequences 1. 解题思路2. 代码实现 题目链接：3404. Count Special Subsequences 1. 解题思路 这道题是事实上这次的周赛最难的一道题目，不过也是有点巧思在内。 最开始我的想法就是按照乘积构成pair，然后…...
萌萌哒的八戒
萌萌哒的八戒 下载压缩包后，打开发现有一张照片 既然是关于猪的，那就用猪圈密码解码 flag{whenthepigwanttoeat}...
开启家具组装新方式：产品说明书智能指导
在快节奏的现代生活中，人们越来越追求便捷与高效。无论是新房装修还是家具换新，家具组装已成为许多家庭不可避免的一项任务。然而，面对复杂多变的家具图纸和冗长的产品说明书，许多人常常感到无从下手，甚至因操作不当而…...
【连续学习之ResCL算法】2020年AAAI会议论文：Residual continual learning
1 介绍 年份：2020 会议： AAAI Lee J, Joo D, Hong H G, et al. Residual continual learning[C]//Proceedings of the AAAI Conference on Artificial Intelligence. 2020, 34(04): 4553-4560. 本文提出的算法是Residual Continual Learning (ResC…...
)
【网络协议】路由信息协议 (RIP)
未经许可，不得转载。 路由信息协议（Routing Information Protocol，简称 RIP）是一种使用跳数（hop count）作为路由度量标准的路由协议，用于确定源网络和目标网络之间的最佳路径。 文章目录 什么是…...
Linux 终端查看 nvidia 显卡型号
文章目录 写在前面1. 需求描述2. 实现方法方法一：方法二方法三： 参考链接 写在前面 自己的测试环境： Ubuntu20.04 1. 需求描述 Linux 终端查看 nvidia 显卡型号 2. 实现方法 方法一： 执行下列指令： sudo update…...
基于neurokit2的心电仿真数据生成实例解析
一 概念 NeuroKit2是一个开源的、社区驱动的、以用户为中心的Python库，可用于多种生理信号的分析处理（例如ECG、PPG、EDA、EMG、RSP），还包括用于特定处理步骤（如频率）的工具提取和过滤方法，并在…...
AMBA-APB
目录 1.APB 协议 2.APB信号列表 3.数据传输 3.1写传输（2种） 3.1.1 无等待状态的写传输 3.1.2有等待状态的写传输 3.2写选通信号 (PSTRB) 字节通道映射 3.3读传输（2种） 3.3.1 无等待状态的读传输 3.3.2有等待状态的读传…...
网安入门之PHP后端基础
PHP 基本概念详解 PHP是一种服务器端脚本语言，常用于动态网站开发和 web 应用程序。以下是 PHP 的基本概念与特点的详细说明： 1. PHP 文件的默认文件扩展名 PHP 文件的扩展名通常为 .php，例如 index.php。PHP 文件可以包含 PHP 代码、HTML…...
windows系统安装完Anaconda之后怎么激活自己的虚拟环境并打开jupyter
1.在win主菜单中找到Anaconda安装文件夹并打开终端 文件夹内有所有安装后的Anaconda的应用软件和终端窗口启动窗口 点击Anaconda Prompt（Anaconda）就会打开类似cmd的命令终端窗口，默认打开的路径是用户名下的路径 2.激活虚拟环境 使用命令…...