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

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

news 2026/2/8 7:12:31

概述

使用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

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2026/2/4 19:38:41

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环境变量会⾃动传递给⼦进程。本地变量限制：本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

椭圆曲线密码学(ECC)

一、ECC算法概述椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2026/2/4 17:51:19

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...

编程新知 2026/1/31 7:11:11

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程触发条件：当其他组件（如Activity、Service）通过ContentR…...

编程新知 2025/10/2 19:46:59

概述