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

v-for列表渲染

news 2026/4/10 0:26:59

一、v-for迭代数组

<li v-for="(e,index) in emp" :key="e.id">编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}
</li>
  • e 是循环数组中的每个元素的别名
  • index 是当前循环的下表，从0开始
  • :key 的作用： 是为了给 Vue 一个提示， 以便它可以跟踪每个节点的唯一标识，它会 基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素==

运行效果如下：

二、v-for 迭代对象

<li v-for="(value,key,index) in user" :key="index">第{{index+1}} 个属性为：{{key}} ={{value}}
</li>

 value是属性值，key是属性名，index索引值（从0开始）,运行效果如下：

 注意：循环的属性顺序在不同js引擎是不一定的，Object.keys()

三、v-if和v-for同时使用时（注意）

需求：  如果年龄大于6666不显示

不推荐v-if和v-for同时作用到同一元素上

作用在同一元素上：

  •      vue3: 会先执行v-if,再执行v-for
  •      vue2: 会先执行v-for,再执行v-if
  •      因为vue3和vue2执行的顺序不相同，不推荐v-if和v-for同时作用到同一元素上，使用在同一元素上会报如下错误：vue.global.js:1661 [Vue warn]: Property "e" was accessed during render but is not defined on instance. 

解决方式：分开使用，不作用同一元素上

eg:           

<ul><template v-for="e in emp" :key="e.id"><li v-if="e.age > 6666">{{e.name}} - {{e.age}}</li>         </template>
</ul>

   *在template元素上循环，循环出来html查看不到template，会自动移除它

完整代码例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-for</title>
</head>
<body><div id="app"><h3>v-for迭代数组</h3><!--<li v-for="(e,index) in emp" :key="e.id">e 是循环数组中的每个元素的别名index 是当前循环的下表，从0开始--><li v-for="(e,index) in emp" :key="e.id">编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}</li><h3>v-for 迭代对象</h3><!--value是属性值，key是属性名，index索引值（从0开始）注意：循环的属性顺序在不同js引擎是不一定的，Object.keys()--><li v-for="(value,key,index) in user" :key="index">第{{index+1}} 个属性为：{{key}} ={{value}}</li><h3>v-if和v-for同时使用时（注意）</h3><!--不推荐v-if和v-for同时作用到同一元素上作用在同一元素上：vue3: 会先执行v-if,再执行v-forvue2: 会先执行v-for,再执行v-if因为vue3和vue2执行的顺序不相同，不推荐v-if和v-for同时作用到同一元素上解决方式：分开使用，不作用同一元素上需求：如果年龄大于6666不显示在template元素上循环，循环出来html查看不到template，会自动移除它--><ul><template v-for="e in emp" :key="e.id"><li v-if="e.age > 6666">{{e.name}} - {{e.age}}</li></template></ul></div><script src="./node_modules/vue/dist/vue.global.js"></script><script type="text/javascript">const {createApp} = Vue;const app=createApp({data(){return{emp:[ //数组{id:0,name:'测试1',age:'555'},{id:1,name:'测试2',age:'6666'},{id:2,name:'测试3',age:'7777'}],user:{ //对象account: 55555,password: 9988999}}}}).mount("#app");console.log("app",app);</script>
</body>
</html>

相关文章：

v-for列表渲染

一、v-for迭代数组 <li v-for"(e,index) in emp" :key"e.id">编号{{index1}} 名字{{e.name}} 年龄{{e.age}} </li> e 是循环数组中的每个元素的别名index 是当前循环的下表&#xff0c;从0开始:key 的作用&#xff1a; 是为了给 Vue 一个提示…...

编程日记 2023/10/24 8:24:18

【引流技术】最新头条全自动引流脚本，解放双手自动引流【引流脚本+技术教程】

软件功能&#xff1a; 评论点赞 适用于自己做头条号,去别人评论区截留,点赞,别人会收到提醒,达到回访效果 文章/视频评论 可以自己发布引流文章或视频,引导进你主页或者私信你,达到引流效果 设备需求&#xff1a; 安卓手机8.1及以上系统 文章分享者&#xff1a;Linxiaoyu…...

编程日记 2023/10/24 8:23:17

智能PDU的“智能”体现在哪些方面？

智能PDU是一种用于管理和监控数据中心或其他设施中的电源分配设备&#xff0c;通过引入以太网络、语音服务等新颖的通讯手段&#xff0c;增加了传统机柜PDU插座所不能提供的智能管理控制模块和控制芯片&#xff0c;同时兼具电源分配和管理功能。智能PDU是当今现代化IDC数据中心…...

编程日记 2023/10/24 8:22:16

Flutter和SwiftUI比较

0.语言 SwiftUI 毫无疑问是Swift语言编写&#xff0c; 在2019年正式推出&#xff0c;目前最新是Swift 5.9 (2023年9月)&#xff0c;由Apple公司维护和发行&#xff1b; 该编程语言发明人已离职Apple。 语言官网&#xff1a;https://developer.apple.com/swift/ 最好用Xcode编…...

编程日记 2023/10/24 8:21:15

使用ngrok内网穿透后，调用相关接口报ERR_NGROK_6024 异常

header增加&#xff1a;ngrok-skip-browser-warning:69420即可。如下图&#xff1a;...

编程日记 2023/10/24 8:19:12

举个栗子！Alteryx 技巧（6）：从 API 中提取数据

你听说过从 API 中提取数据吗&#xff1f;API 是指应用编程接口&#xff0c;是计算机之间或计算机程序之间的连接&#xff0c;它是一种软件接口&#xff0c;让不同的软件进行信息共享。对于很多数据分析师来说&#xff0c;他们常常需要从 API 中提取数据&#xff0c;那么如何快…...

编程日记 2023/10/24 8:18:11

算法、语言混编、分布式锁与分布式ID、IO模型

一、算法初识 数据结构和算法是程序的基石。我们使用的所有数据类型就是一种数据结构&#xff08;数据的组织形式&#xff09;&#xff0c;写的程序逻辑就是算法。 算法是指用来操作数据、解决程序问题的一组方法。 对于同一个问题&#xff0c;使用不同的算法&#xff0c;也…...

编程日记 2023/10/24 8:17:10

代码随想录 Day26 贪心 01 全集 LeetCode455 分发饼干 LeetCodeT346摆动序列 LeetCdoe T53 最大子数组和

前言:贪心无套路 本质: 局部最优去推导全局最优 两个极端 贪心算法的难度一般要么特别简单,要么特别困难,所以我们只能多见识多做题,记住无需数学证明,因为两道贪心基本上毫无关系,我们只需要去思考局部最优即可 贪心的小例子 比如有一堆钞票&#xff0c;你可以拿走十张&#x…...

编程日记 2023/10/24 8:16:09

【前端vue面试】TypeScript

目录 快速入门0、TypeScript简介1、TypeScript 开发环境搭建2、基本类型3、编译选项4、webpack5、Babel面向对象1、类（class）2、面向对象的特点3、接口（Interface）4、泛型（Generic）快速入门 0、TypeScript简介 TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引…...

编程日记 2023/10/24 8:15:07

vue-next-admin框架的认识

最近利用这个框架二开了一个后台管理系统&#xff0c;这里简单介绍一下&#xff0c;后续会进行框架的修改等文章 1&#xff1a;介绍 Vue-next-admin是一个基于Vue3和Element-Plus的后台管理系统框架。它提供了一套完整的、易于扩展的后台管理界面解决方案&#xff0c;可用于快…...

编程日记 2023/10/24 8:13:05

【2024秋招】2023-9-14 最右线下后端开发二面

1 OS 1.1 讲讲什么是虚拟内存&#xff0c;怎么实现的 虚拟内存是一种存储器管理能力&#xff0c;它使得一个应用程序似乎有更多的物理内存&#xff08;RAM&#xff09;可用&#xff0c;而实际上&#xff0c;系统使用了一部分硬盘空间来模拟额外的 RAM。通过使用虚拟内存&…...

编程日记 2023/10/24 8:12:04

LeetCode 2678. 老人的数目

【LetMeFly】2678.老人的数目 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-senior-citizens/ 给你一个下标从 0 开始的字符串 details 。details 中每个元素都是一位乘客的信息&#xff0c;信息用长度为 15 的字符串表示&#xff0c;表示方式如下&#…...

编程日记 2023/10/24 8:11:03

java--三元运算符、运算符的优先级

1.三元运算符介绍 1.格式&#xff1a;条件表达式&#xff1f;值1&#xff1a;值2&#xff1b; 2.执行流程&#xff1a;首先计算关系表达式的值&#xff0c;如果值为true&#xff0c;返回值1&#xff0c;如果为false&#xff0c;返回值2 2.运算符优先级 1.在表达式中&#xf…...

编程日记 2023/10/24 8:08:59

在推荐系统中，BPRloss、Embloss、CrossEntropyloss是怎么计算的，代表的意义是什么

一、BPRloss&#xff08;Bayesian Personalized Ranking loss&#xff09;是一种用于推荐系统中的损失函数&#xff0c;用于衡量预测的排序与真实的用户行为排序之间的差异。BPRloss的计算过程如下&#xff1a; 输入&#xff1a;BPRloss的输入包括用户u、物品i和物品j&#xff…...

编程日记 2023/10/24 8:07:56

【Python语言速回顾】——异常文件操作

目录 一、异常 1、检测异常try语句 2、抛出异常 3、异常处理流程 二、文件操作 1、打开文件 ①文件模式acess_mode ②文件缓冲区 2、基本的文件方法 ①读和写、关闭文件 ②读取行 ③文件重命名 ④删除文件&#xff08;系统中已存在的文件&#xff09; 3、基本的目…...

编程日记 2023/10/24 8:06:55

SAP POorPI RFC接口字段调整后需要的操作-针对SP24及以后的PO系统

文章目录 问题描述解决办法 问题描述 在SAP系统的RFC接口结构中添加了字段&#xff0c;RFC也重新引用到了PO系统&#xff0c;Cache和CommunicationChannel都刷新或启停了&#xff0c;但是新增的字段在调用接口的时候数据进不到SAP系统&#xff0c;SAP系统内的值也出不来。经过…...

编程日记 2023/10/24 8:05:54

【ArcGIS模型构建器】03：多个shp批量按属性分割（多个县区批量提取乡镇）

文章目录 一、数据预览二、模型构建三、保存模型一、数据预览 加载实验数据： 本试验实现将两个县区的数据分割为乡镇数据。 二、模型构建 1. 添加数据文件夹 将县区数据所在的根目录文件夹拖进模型。 2. 添加要素类迭代器 插入→迭代器→要素类。 用连接工具，将数据文件…...

编程日记 2023/10/24 8:04:53

JavaScript中JSON和Bom对象模型

JSON JSON是一种轻量级的数据交换格式 简洁和清晰的层次结构使得JSON成为理想的数据交换语言 易于人们解析和生成&#xff0c;并有效的提升网络传输效率 javaScript一切皆为对象&#xff0c;任何js支持的对象都可以使用JSON来表示 格式&#xff1a; 对象都用[] 数组都用{}…...

编程日记 2023/10/24 8:03:52

Ubuntu下载、安装QGIS软件的方法

本文介绍在Linux操作系统Ubuntu版本中&#xff0c;通过命令行的方式&#xff0c;配置QGIS软件的方法。 在Ubuntu等Linux系统中&#xff0c;可以对空间信息加以可视化的遥感、GIS软件很少&#xff0c;比如ArcGIS下属的ArcMap就没有对应的Linux版本&#xff08;虽然有ArcGIS Serv…...

编程日记 2023/10/24 8:02:51

spring sharding JDBC 动态调整数据库连接

spring sharding JDBC 动态调整数据库连接 通过重写ShardingSphereDataSource类来实现 代码 package org.apache.shardingsphere.driver.jdbc.core.datasource;import com.alibaba.druid.pool.DruidDataSource; import lombok.extern.slf4j.Slf4j; import org.apache.shardi…...

编程日记 2023/10/24 8:01:50

深度解析SNMP协议：基本工作机制、核心组件与典型应用场景

深度解析SNMP协议&#xff1a;基本工作机制、核心组件与典型应用场景摘要一、SNMP协议&#xff1a;基础定义1.1 SNMP协议&#xff1a;是什么1.2 SNMP协议&#xff1a;核心定位二、SNMP协议&#xff1a;三大核心组件&#xff08;工作基础&#xff09;2.1 NMS&#xff08;网络管理…...

编程新知 2026/4/10 0:20:40

Spire实现Wod与Pdf相互转换

在 Java 中使用 Spire 库进行 Word 和 PDF 的转换&#xff0c;你需要用到两个不同的库&#xff1a;Word 转 PDF&#xff1a;使用 Spire.Doc for Java (免费版)PDF 转 Word&#xff1a;使用 Spire.PDF for Java (免费版)重要提示&#xff1a; 免费版&#xff08;Free Spire&…...

编程新知 2026/4/9 23:46:19

EF Core 10向量搜索扩展架构设计图泄露事件（内部PPT第7页已证实）：这3个设计决策将重写.NET AI应用开发范式

第一章&#xff1a;EF Core 10向量搜索扩展的演进背景与战略定位随着AI应用在企业级系统中加速落地&#xff0c;传统关系型数据库的标量查询能力已难以满足语义检索、相似性匹配等新兴场景需求。EF Core 10首次将向量搜索能力深度融入ORM层&#xff0c;标志着微软在数据访问技术…...

编程新知 2026/4/9 22:27:56

（27）ArcGIS Pro 范围内汇总、汇总统计数据与交集制表：空间统计三工具全攻略

点赞&#xff0b;关注送&#xff1a; 1、天地图GS&#xff08;2024&#xff09;0650号_2025.9版&#xff1b; 2、全国土地覆盖数据CLCD2025年&#xff1b; 注&#xff1a;其他数据也可私信或留言&#xff0c;看是否有 前言 在GIS项目全流程中&#xff0c;空间统计是连接数据处理…...

编程新知 2026/4/9 21:07:17

2025最权威的六大AI论文网站推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在当下的学术研究环境里头&#xff0c;若是合理地运用AI写作工具&#xff0c;那么能够有效地…...

编程新知 2026/4/9 20:59:13

BetterGenshinImpact多开功能终极指南：同时管理多个原神账号的完整方案

BetterGenshinImpact多开功能终极指南&#xff1a;同时管理多个原神账号的完整方案 【免费下载链接】better-genshin-impact &#x1f4e6;BetterGI 更好的原神 - 自动拾取 | 自动剧情 | 全自动钓鱼(AI) | 全自动七圣召唤 | 自动伐木 | 自动刷本 | 自动采集/挖矿/锄地 | 一条龙…...

编程新知 2026/4/9 18:48:39

OpenClaw长任务优化：Qwen3.5-9B的128K上下文实战技巧

OpenClaw长任务优化&#xff1a;Qwen3.5-9B的128K上下文实战技巧 1. 为什么需要长上下文支持 上周我尝试用OpenClaw处理一本300页的技术书籍时&#xff0c;遇到了典型的长文档处理难题。当我把整本书的PDF文本直接喂给模型时&#xff0c;发现后半部分的分析结果明显偏离主题—…...

编程新知 2026/4/9 17:42:03

WinCDEmu：开源虚拟光驱工具的技术架构与实践指南

WinCDEmu&#xff1a;开源虚拟光驱工具的技术架构与实践指南 【免费下载链接】WinCDEmu 项目地址: https://gitcode.com/gh_mirrors/wi/WinCDEmu 副标题&#xff1a;5个核心优势让你高效管理光盘映像文件 一、核心价值解析 WinCDEmu作为一款开源虚拟光驱解决方案&…...

编程新知 2026/4/9 16:47:59

5分钟上手Krita智能选区插件：AI一键抠图，释放创作潜能 [特殊字符]

5分钟上手Krita智能选区插件&#xff1a;AI一键抠图&#xff0c;释放创作潜能 &#x1f3a8; 【免费下载链接】krita-vision-tools Krita plugin which adds selection tools to mask objects with a single click, or by drawing a bounding box. 项目地址: https://gitcode…...

编程新知 2026/4/9 16:27:52

5个实战技巧：快速掌握新一代AI组件开发

5个实战技巧&#xff1a;快速掌握新一代AI组件开发 【免费下载链接】Element-Plus-X Enterprise-level AI component library front-end solution &#x1f916; 项目地址: https://gitcode.com/gh_mirrors/el/Element-Plus-X Element-Plus-X是企业级AI组件库前端解决方…...

编程新知 2026/4/9 15:17:21