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

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

news 2026/3/27 19:35:01

概述

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

从Shadertoy到Cesium：那些GLSL移植时没人告诉你的分辨率陷阱

GLSL跨平台移植中的分辨率适配陷阱与实战解决方案当我们将Shadertoy上令人惊艳的GLSL效果移植到Cesium等三维引擎时，往往会遇到一个看似简单却影响深远的问题——分辨率适配。这个问题不仅关乎视觉效果还原度，更直接影响着色器在不同设备上的表现一致性…...

编程新知 2026/3/27 19:26:53

E-Hentai Downloader 终极使用指南：从零开始掌握开源项目配置教程

E-Hentai Downloader 终极使用指南：从零开始掌握开源项目配置教程【免费下载链接】E-Hentai-Downloader Download E-Hentai archive as zip file 项目地址: https://gitcode.com/gh_mirrors/eh/E-Hentai-Downloader 你是否经常在E-Hentai网站上遇到下载困难…...

编程新知 2026/3/27 18:54:45

Wan2.2-I2V-A14B部署教程：系统盘50GB+数据盘40GB最小化配置实操

Wan2.2-I2V-A14B部署教程：系统盘50GB数据盘40GB最小化配置实操 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像，特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像最大的特点是开箱即用，内置了完整…...

编程新知 2026/3/27 18:52:40

macOS 环境下的 Fugu14 越狱实战：从环境配置到 Unc0ver 完美激活

1. 准备工作：搭建macOS越狱环境在开始Fugu14越狱之前，我们需要确保macOS环境配置完善。我实测发现，很多新手卡在第一步环境搭建，其实只要按顺序完成这些准备，后面流程会顺利很多。首先需要安装Python 3.8或更高版本…...

编程新知 2026/3/27 18:24:15

实战LangGraph构建智能客服系统：在快马平台实现工单自动分类与处理全流程

今天想和大家分享一个用LangGraph构建智能客服系统的实战经验。这个项目主要解决工单自动分类和处理的问题，整个过程在InsCode(快马)平台上完成，从开发到部署一气呵成。项目背景与需求分析传统客服系统需要人工处理大量工单，效率低下且容易…...

编程新知 2026/3/27 17:21:55

3MF格式与Blender从入门到精通：重塑3D打印工作流

3MF格式与Blender从入门到精通：重塑3D打印工作流【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 概念解析：为什么3MF正在取代STL成为行业新标准 …...

编程新知 2026/3/27 17:11:54