Vue 3 循环遍历(超详细)

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

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

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前, 星球 内第2个项目《仿小红书(微服务架构)》正在更新中。第1个项目:全栈前后端分离博客项目已经完结,演示地址:http://116.62.199.48/。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 255 小节,累计 39w+ 字,讲解图:1716 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1300+ 小伙伴加入,欢迎点击围观

大家好,我是小哈。

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