Vue 3 循环遍历(超详细)

更新时间 2023-05-23 10:06:53

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / 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>

运行效果图如下:

v-for 指令遍历基本用法v-for 指令遍历基本用法

遍历对象数组

遍历对象数组的方式与遍历普通数组基本相同,只不过访问方式稍微有些变化,示例代码如下:

<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 指令遍历对象数组

遍历对象

除了遍历数组外,也可以通过 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>

运行结果如下:

v-for 指令遍历对象v-for 指令遍历对象