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

概述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236407.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3d max高质量渲染时,硬件的要求有什么?

渲染过程中&#xff0c;想要追求&#xff0c;效果图高质量渲染&#xff0c;高效率渲染的过程中&#xff0c;3d max高清渲染不只是三维软件的一个要求&#xff0c;对于本地计算机的硬件要求配置也是很重要的。 今天&#xff0c;小编带大家来聊聊3d max高质量渲染过程中&#xff…

solidity 重入漏洞

目录 1. 重入漏洞的原理 2. 重入漏洞的场景 2.1 msg.sender.call 转账 2.2 修饰器中调用地址可控的函数 1. 重入漏洞的原理 重入漏洞产生的条件&#xff1a; 合约之间可以进行相互间的外部调用 恶意合约 B 调用了合约 A 中的 public funcA 函数&#xff0c;在函数 funcA…

使用 Node.js 删除文件 - 完整步骤教程

引言 在 Node.js 中处理文件尤其是移除文件&#xff0c;对于维护高效应用程序至关重要。储存和秩序当道的今天&#xff0c;删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因&#xff0c;并通过各种案例展示了这个概念&#xff0c;同…

【C#】.net core 6.0 通过依赖注入注册和使用上下文服务

给自己一个目标&#xff0c;然后坚持一段时间&#xff0c;总会有收获和感悟&#xff01; 请求上下文是指在 Web 应用程序中处理请求时&#xff0c;包含有关当前请求的各种信息的对象。这些信息包括请求的头部、身体、查询字符串、路由数据、用户身份验证信息以及其他与请求相关…

案例系列:营销模型_客户细分_无监督聚类

案例系列&#xff1a;营销模型_客户细分_无监督聚类 import numpy as np # 线性代数库 import pandas as pd # 数据处理库&#xff0c;CSV文件的输入输出&#xff08;例如pd.read_csv&#xff09;/kaggle/input/customer-personality-analysis/marketing_campaign.csv在这个项…

KoPA: Making Large Language Models Perform Better in Knowledge Graph Completion

本来这个论文用来组会讲的&#xff0c;但是冲突了&#xff0c;没怎么讲&#xff0c;记录一下供以后学习。 创新点 按照我的理解简单概述一下这篇论文的创新点 提出使用大模型补全知识图谱&#xff0c;并且融合知识图谱的结构信息提出一个新的模型KoPA模型&#xff0c;采用少…

JavaCV音视频开发宝典:UDP局域网组播推流,多播推流,局域网多网段推流,使用UDP方式推送TS组播流,实现UDP一对多组播

《JavaCV音视频开发宝典》专栏目录导航 《JavaCV音视频开发宝典》专栏介绍和目录 ​ 前言 在之前文章中我们已经实现rtp点到点传输JavaCV音视频开发宝典:rtp点到点音视频传输(一对一音视频直播)和rtp广播JavaCV音视频开发宝典:rtp广播方式发送TS流音视频传输(一对多音视…

Linux宝塔面板本地部署Discuz论坛发布到公网访问【无需公网IP】

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…

uni-app学习记录

uni-app官网学习记录 uni-app注意点记录 页面跳转注意事项 navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面。reLaunch 可以打开任意页面。不能在首页 onReady 之前进行页面跳转。 页面通讯 // 发起页面uni.$emit(update,{msg:页面更新})//…

软件设计模式:六大设计原则

文章目录 前言一、开闭原则二、里氏替换原则三、依赖倒转原则四、接口隔离五、迪米特法则六、合成复用原则总结 前言 在软件开发中&#xff0c;为了提高软件系统的可维护性和可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;程序员要尽量根据6条原则来开发程序&am…

Postman调用HTTPS需要配置

1、配置—Settings 2、General—SSL cert…&#xff1a;改成OFF 3、添加请求IP 欢迎大家阅读&#xff0c;本人见识有限&#xff0c;写的博客难免有错误或者疏忽的地方&#xff0c;还望各位大佬指点&#xff0c;在此表示感谢。觉得本文章有帮助到的&#xff0c;点个赞呗

项目进度管理:掌握进度管理技巧,保障项目不延期

项目进度问题通常在小型团队中并不显著&#xff0c;因为这类团队通常人数较少&#xff0c;成员间的沟通成本相对较低。这使得他们在执行项目时更加团结和协作。 然而&#xff0c;当团队规模扩大到上百人时&#xff0c;这使得沟通变得更为复杂&#xff0c;在这个庞大的团队中&…

JAVA线上事故:递归导致的OOM

最近因为人员离职&#xff0c;接手一个项目&#xff0c;是xxljob的客户端&#xff0c;部署在k8s上&#xff0c;在排查线上工单时&#xff0c;发现了一个问题&#xff1a; 在管理界面上&#xff0c;我惊讶的发现&#xff0c;三个月的时间&#xff0c;2个Pod&#xff0c;每个都重…

debian10安装配置vim+gtags

sudo apt install global gtags --version gtags //生成gtag gtags-cscope //查看gtags gtags与leaderf配合使用 参考: 【VIM】【LeaderF】【Gtags】打造全定制化的IDE开发环境&#xff01; - 知乎

以ACM32F403为主控的车载电动尾门案例分析

方案概述 随着汽车行业智能化、电气化、网联化大潮的发展&#xff0c;电动后尾门逐渐普及化。此方案兼容多种人机交互接口&#xff0c;包括传统的按键开关&#xff0c;也包括智能脚踢传感器&#xff0c;远程手机控制等智能控制技术&#xff0c;支持防夹算法&#xff0c;支持全锁…

Apache+PHP环境配置 手动配置

准备工作&#xff0c;在G盘新建一个WAMP目录 1.获取Apache 打开下载地址Apache VS17 binaries and modules download&#xff0c;下载 httpd-2.4.58-win64-VS17.zip 将下载好的httpd-2.4.58-win64-VS17.zip拷贝到G:\WAMP目录下并解压到当前目录&#xff0c;得到Apache24目录 …

u盘加密软件合辑丨u盘怎么上锁某个文件夹

毫无疑问&#xff0c;U盘是我们生活中最常使用的移动储存设备&#xff0c;常见的U盘普遍没有使用限制&#xff0c;任何人都可以浏览其中的数据&#xff0c;这就可能导致数据泄密和隐私泄露&#xff0c;那么普通U盘怎么变成加密U盘呢&#xff1f; 一、上锁某个U盘文件夹 可以将…

Vue3+Echarts:堆积柱状图的绘制

一、需求 在Vue3项目中&#xff0c;想用Echarts来绘制堆积柱状图&#xff0c;去展示最近一周APP在不同渠道的登录人数效果如下&#xff1a; 二、实现 (关于Echarts的下载安装以及图表的样式设计&#xff0c;此处不展开&#xff01;) 1、Templates部分 <template>&l…

向本地maven中加载依赖

1、现在maven官网仓库找到相应依赖 Maven Repository: Search/Browse/Explore (mvnrepository.com) 2、下载相应jar包 3、使用maven命令在jar所在文件加内cmd运行 注意修改参数 -DgroupId&#xff1a;表示jar对应的groupId <groupId>io.confluent</groupId>…

菜鸟进阶数据大牛:如何系统学习BI商业智能

在这个信息爆炸式增长的时代&#xff0c;挖掘数据的潜在价值尤为重要&#xff0c;越来越多的人将目光聚集于商务智能BI领域。通过数据分析软件对来自不同的数据源进行统一的处理和管理&#xff0c;并以灵活的方式展示数据之间的联系&#xff0c;辅助企业进行决策。 在BI越发重…