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

21 Vue3中使用v-for遍历对象数组

news 2026/2/7 10:03:05

概述

使用v-for遍历对象数组在真实的开发中也属于非常常见的用法，需要重点掌握。

因为目前流行的是前后端分离开发，在前后端分离开发中，最常需要处理的就是对象数组类型的数据了。

比如，将员工信息渲染到表格中。

这节课我们就来使用v-for渲染对象数组的方式实现一下这个案例。

基本用法

我们创建src/components/Demo20.vue，在这个组件中，我们要：

1：定义employees，表示员工对象数组，其中每个元素有id、name、age、gender、salary字段。
2：创建一个表格
3：在表格中使用v-for遍历employees并渲染
4：稍微用CSS样式美化一下表格

代码如下：

<script setup>
const employees = [{id: 1,name: "张三",age: 23,gender: "男",salary: 30000,},{id: 2,name: "李四",age: 23,gender: "男",salary: 28000,},{id: 3,name: "王五",age: 23,gender: "男",salary: 18000,},
]
</script>
<template><div><table><thead><tr><th>#</th><th>姓名</th><th>性别</th><th>年龄</th><th>薪资</th></tr></thead><tbody><tr v-for="(employee, index) in employees" :key="employee.id"><td>{{ index + 1 }}</td><td>{{ employee.name }}</td><td>{{ employee.gender }}</td><td>{{ employee.age }}</td><td>{{ employee.salary }}</td></tr></tbody></table></div>
</template>
<style>
table {width: 500px;text-align: center;border-collapse: collapse;
}tr, td, th {border: 1px solid #ccc;
}th, td {padding: 5px;
}
</style>

接着，我们修改src/App.vue，引入Demo20.vue并进行渲染：

<script setup>
import Demo from "./components/Demo20.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后，我们浏览器访问：http://localhost:5173/

在这里插入图片描述

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo20.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

src/components/Demo20.vue

<script setup>
const employees = [{id: 1,name: "张三",age: 23,gender: "男",salary: 30000,},{id: 2,name: "李四",age: 23,gender: "男",salary: 28000,},{id: 3,name: "王五",age: 23,gender: "男",salary: 18000,},
]
</script>
<template><div><table><thead><tr><th>#</th><th>姓名</th><th>性别</th><th>年龄</th><th>薪资</th></tr></thead><tbody><tr v-for="(employee, index) in employees" :key="employee.id"><td>{{ index + 1 }}</td><td>{{ employee.name }}</td><td>{{ employee.gender }}</td><td>{{ employee.age }}</td><td>{{ employee.salary }}</td></tr></tbody></table></div>
</template>
<style>
table {width: 500px;text-align: center;border-collapse: collapse;
}tr, td, th {border: 1px solid #ccc;
}th, td {padding: 5px;
}
</style>

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/

21 Vue3中使用v-for遍历对象数组

概述使用v-for遍历对象数组在真实的开发中也属于非常常见的用法，需要重点掌握。因为目前流行的是前后端分离开发，在前后端分离开发中，最常需要处理的就是对象数组类型的数据了。比如，将员工信息渲染到表格中。这节课我们就…...

编程日记 2023/12/21 19:48:53

深入理解Java自定义异常与全局异常处理 @RestControllerAdvice

异常主要是包括编译时的异常和运行时的异常。编译时的异常可以通过捕获异常获取，运行时候的异常主要是通过代码规范，或者测试。 Spring Boot提供了两种异常处理方式来统一处理和维护异常信息。第一种方式是使用RestControllerAdvice注解与ExceptionHand…...

编程日记 2023/12/21 19:42:48

h5页面跳转微信小程序（最简单的方法|URL Scheme）

文章目录导文实现获取 URL Scheme加密 URL Scheme获取方式拼接参数明文 URL Scheme获取方式实际项目展示：频率限制注意事项开放范围示例代码包导文 H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序，而H5…...

编程日记 2023/12/21 19:41:48

智能优化算法应用：基于非洲秃鹫算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于非洲秃鹫算法3D无线传感器网络(WSN)覆盖优化 - 附代码文章目录智能优化算法应用：基于非洲秃鹫算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.非洲秃鹫算法4.实验参数设定5.算法结果6.…...

编程日记 2023/12/21 19:38:45

持续集成交付CICD：Jenkins使用GitLab共享库实现前端项目镜像构建

目录一、实验 1. GitLab修改项目文件与Harbor环境确认 2.Jenkins使用GitLab共享库实现前端项目镜像构建 3.优化CI流水线封装Harbor账户密码 4.Jenkins再次使用GitLab共享库实现前端项目镜像构建一、实验 1. GitLab修改项目文件与Harbor环境确认 （1&#xf…...

编程日记 2023/12/21 19:35:43

1、表的高级查询 use student select * from stuinfo1 -- 使用 in 的子查询 select * from stuinfo where stu_age in ( select stu_age from stuinfo where cla_id 12345 ) select * from stuinfo where stu_age in ( 19 , 20 , 21 , 25 , 23 , 1…...

编程日记 2023/12/21 19:33:41

wavlink 路由器多处前台RCE漏洞复现

0x01 产品简介 WAVLINK是中国睿因科技（WAVLINK）公司开发的一款路由器。 0x02 漏洞概述 WAVLINK路由器mesh.cgi、nightled.cgi、live-api.cgi等接口处存在命令执行漏洞，攻击者可通过该漏洞获取服务器权限。包含型号WN530HG4、WN531G3、WN572HG3、WN535G3、WN575A4等。 0x…...

编程日记 2023/12/21 19:32:40

互联网中的商品超卖问题及其解决方案：Java中Redis结合UUID的应用

前言在设计商品下单和库存扣减，你一定遇到过这样的问题，库存扣减为0了，可是消费者还能下单，并将订单信息保存到了数据库里，针对商品超卖问题，作此篇以解决。随着互联网商业的飞速发展，商品超…...

编程日记 2023/12/21 19:31:39

mysql：查看线程缓存中的线程数量

使用命令show global status like Threads_cached;可以查看线程缓存中的线程数量。例如，查询线程缓存中的线程数量如下： 然后启动应用程序，使用连接，查询如下： 由查询结果可以看到，线程缓存中的线程数量…...

编程日记 2023/12/21 19:29:37

线性表，也是Java中数组的知识点！

线性表定义： 由n (n≥0)个数据特性相同的元素构成的有限序列称为线性表，(n0)的时候被称为空表。线性表的顺序表示线性表的顺序存储又被称为顺序表优点无需为表示表中元素之间的逻辑关系而增加额外的存储空间可以随意读取任意位置的元素缺点插入…...

编程日记 2023/12/21 19:28:36

java使用面向对象实现图书管理系统

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好，我是xiaoxie.希望你看完之后,有不足之处请多多谅解，让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …...

编程日记 2023/12/21 19:27:35

2023 英特尔On技术创新大会直播 |我感受到的“芯”魅力

文章目录每日一句正能量前言AI时代，云与PC结合为用户带来更好体验全新处理器，首次引入针对人工智能加速的NPU大模型时代，软硬结合带来更好训练成果后记每日一句正能量成长是一条必走的路路上我们伤痛在所难免。前言在2023年的英特尔On技…...

编程日记 2023/12/21 19:24:32

Atium Designer 23 全新功能-丝印制备，解决DFM问题

进行PCB设计时需要养成良好的设计习惯，才能保证后期的生产效果。例如整板上需要保证丝印跟阻焊的间距规则避免产生丝印重叠造成的PCB制造设计（DFM）问题。丝印重叠阻焊的影响有如下： 1）PCB板后期打样，一般是…...

编程日记 2023/12/21 19:20:29

Nginx快速入门：安装目录结构详解及核心配置解读（二）

0. 引言上节我们讲解了nginx的应用场景和安装，本节继续针对nginx的各个目录文件进行讲解，让大家更加深入的认识nginx。并通过一个实操案例，带大家来实际认知nginx的核心配置 1. nginx安装目录结构首先nginx的默认安装目录为：…...

编程日记 2023/12/21 19:19:29

测试TensorFlow/PyTorch的GPU版本是否启用

文章目录 1. Pytorch测试代码2. TensorFlow测试代码后续遇到好的会不断更新。。。 1. Pytorch测试代码 import torch def gpu_is_available():print(\nGPU details:)print(f gpu_is_available : , torch.cuda.is_available())print(f cuda_device_count : , t…...

编程日记 2023/12/21 19:16:26

字符串逆序输出

逆序输出就是本来abc输出的，然后我想让他输出成cba，那么我们还是要用到for循环，只不过原先是从零开始往上加，这回呢，是从上面往下减我们观察上面这个图片，我们想要输出olleh，那么我们就要从4开…...

编程日记 2023/12/21 19:14:24

期货平仓日历(期货平仓日期汇总)

什么是期货平仓日历？ 期货是一种高风险高收益的投资品种。而期货交易不同于股票等其他投资品种的交易，期货交易需要在一定时间内才能买卖。而期货平仓日历就是指期货交易中规定的所有合约的平仓日期汇总。常见期货平仓日期和时间？ 不同的…...

编程日记 2023/12/21 19:13:23

计算机网络-进阶

目录易混淆物理层数据链路层网络层nat如何实现私有ip通信IP数据报格式解析tcp 连接tcp流量控制滑动窗口拥塞控制报文捕获 wireshark路由模拟器 enspcdn代理服务器 VS cdn VS web cache 计算机有了物理地址，为什么还要有ip地址？单播多播广播传输层会…...

编程日记 2023/12/21 19:09:20

LED恒流驱动芯片SM2188EN：满足LED灯具出口欧盟所需的ERP能效认证标准和要求

LED灯具是一种节能环保的照明产品，因其高效节能、长寿命等优点而备受消费者青睐，成为照明市场的主流产品。作为LED灯具出口欧盟市场的必备条件，ERP能效认证标准和要求对LED灯具的能效性能提出了严格的要求。首先，ERP能效认证标准…...

编程日记 2023/12/21 19:08:19

RocketMQ系统性学习-RocketMQ原理分析之消费者的接收消息流程

🌈🌈🌈🌈🌈🌈🌈🌈 【11来了】文章导读地址：点击查看文章导读！ 🍁🍁🍁🍁🍁🍁&#x1f3…...

编程日记 2023/12/21 19:07:17

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...

编程新知 2026/1/23 7:23:58

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

使用LangGraph和LangSmith构建多智能体人工智能系统

现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。在这篇博客〔原作者&a…...

编程新知 2026/1/26 13:48:59

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数二…...

编程新知 2026/1/31 10:58:46

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/31 3:52:49

C#学习第29天：表达式树（Expression Trees）

目录什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写适用场景代码复杂性…...

编程新知 2025/10/20 9:03:01

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

概述