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/

截止目前， 星球 内专栏累计输出 66w+ 字，讲解图 2896+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2300+ 小伙伴加入学习 ，欢迎点击围观

大家好，我是小哈。

在实际项目开发中，前端经常需要请求后端接口，以获取相关数据，数据格式通常为 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 指令遍历对象