Vue 3 循环遍历(超详细)
一则或许对你有用的小广告
欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸:仿小红书(微服务架构)》 正在持续爆肝中,基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...
,点击查看项目介绍 ; - 《从零手撸:前后端分离博客项目(全栈开发)》 2 期已完结,演示链接: http://116.62.199.48/ ;
截止目前, 星球 内专栏累计输出 54w+ 字,讲解图 2476+ 张,还在持续爆肝中.. 后续还会上新更多项目,目标是将 Java 领域典型的项目都整一波,如秒杀系统, 在线商城, IM 即时通讯,权限管理,Spring Cloud Alibaba 微服务等等,已有 1900+ 小伙伴加入学习 ,欢迎点击围观
大家好,我是小哈。
在实际项目开发中,前端经常需要请求后端接口,以获取相关数据,数据格式通常为 JSON ,需要前端从 JSON 中获取对象或数组来渲染页面。本小节中,我们将学习如何使用 v-for
指令遍历数组、对象数组以及对象。
v-for 指令基础用法
第一种方式
通过 v-for
指令可以从数组中循环获取数据并渲染,语法格式如下:
v-for="item in list"
item
表示当前正在遍历的对象;in
是固定语法,表示对list
数组进行遍历;list
表示被遍历的数组。
第二种方式
还有另外一种遍历方式,可额外获取当前索引下标。语法格式如下:
v-for="(item, index) in list" :key="index"
其中,index
为被遍历数组的当前索引值。:key="index"
可为每项提供一个唯一 key
属性,目的是为了方便的跟踪每个节点,这对重用和重新排列现有元素非常有帮助。
使用示例
<template>
<h1>犬小哈教程列表</h1>
<table border="1" width="600px">
<tr>
<td>序号</td>
<td>名称</td>
</tr>
<tr v-for="(tutorial, index) in tutorials" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ tutorial }}</td>
</tr>
</table>
</template>
<script setup>
import { ref } from 'vue'
// 定义一个教程列表数组
const tutorials = ref(['Vue 3 教程', 'IDEA 使用教程', 'Docker 教程'])
</script>
运行效果图如下:
遍历对象数组
遍历对象数组的方式与遍历普通数组基本相同,只不过访问方式稍微有些变化,示例代码如下:
<template>
<h1>犬小哈教程列表</h1>
<table border="1" width="600px">
<tr>
<td>ID</td>
<td>名称</td>
<td>阅读量</td>
</tr>
<tr v-for="(tutorial, index) in tutorials" :key="index">
<td>{{ tutorial.id }}</td>
<td>{{ tutorial.name }}</td>
<td>{{ tutorial.viewNum }}</td>
</tr>
</table>
</template>
<script setup>
import { reactive } from 'vue'
// 定义一个教程列表数组, 元素为对象,包含 ID、教程名称、被阅读数 3 个字段
const tutorials = reactive([
{id: 1, name: "Vue 3 教程", viewNum: "12092"},
{id: 2, name: "IDEA 教程", viewNum: "90236"},
{id: 3, name: "Docker 教程", viewNum: "5902"},
])
</script>
运行结果如下:
遍历对象
除了遍历数组外,也可以通过 v-for
指令遍历对象。语法格式如下:
v-for="(value, key, index) in Object" :key="index"
Object
表示被遍历的对象;key
表示对象的字段名;value
表示对象的字段值;index
表示当前遍历的索引下标。
示例代码如下:
<template>
<p v-for="(value, key, index) in tutorial" :key="index">
字段名:{{ key }},字段值:{{ value }}
</p>
</template>
<script setup>
import { reactive } from 'vue'
// 定义一个对象,包含 ID、教程名称、被阅读数 3 个字段
const tutorial = reactive({id: 1, name: "Vue 3 教程", viewNum: "12092"},)
</script>
运行结果如下: