快捷導(dǎo)航

Vue3中v-for的使用示例詳解

更新時(shí)間：2024年10月28日 14:23:28 作者：前端小垃圾

本文主要介紹了Vue3中v-for的使用方法,包括遍歷數(shù)組、遍歷對(duì)象、索引訪問(wèn)、嵌套遍歷以及結(jié)合計(jì)算屬性和方法的使用,v-for可以幫助用戶(hù)動(dòng)態(tài)地生成和管理列表數(shù)據(jù),并根據(jù)需要進(jìn)行復(fù)雜的DOM操作,提供了多種示例,幫助讀者更好地理解和使用v-for

基本用法

遍歷數(shù)組

當(dāng)你有一個(gè)數(shù)組，并且希望根據(jù)數(shù)組的內(nèi)容生成一組元素時(shí)，可以使用 v-for。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);
</script>

在這個(gè)示例中，v-for="item in items" 會(huì)遍歷 items 數(shù)組，為數(shù)組中的每個(gè)元素生成一個(gè) <li> 元素。item 是每次循環(huán)時(shí)當(dāng)前的數(shù)組項(xiàng)。

:key 是一個(gè)唯一的標(biāo)識(shí)符，用于幫助 Vue 識(shí)別每個(gè)列表項(xiàng)的身份，以?xún)?yōu)化渲染性能。遍歷對(duì)象

你也可以使用 v-for 遍歷對(duì)象的鍵值對(duì)：

<template>
  <ul>
    <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const object = ref({
  name: 'Vue',
  version: '3.2.0',
  framework: 'JavaScript',
});
</script>

在這個(gè)示例中，v-for="(value, key) in object" 遍歷對(duì)象 object 的鍵值對(duì)，其中 key 是對(duì)象的鍵，value 是對(duì)象的值。

使用索引

你可以通過(guò) v-for 的第二個(gè)參數(shù)訪問(wèn)當(dāng)前項(xiàng)的索引：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index }}: {{ item.name }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);
</script>

在這個(gè)示例中，index 是當(dāng)前項(xiàng)在數(shù)組中的索引。

嵌套 v-for

你可以在 v-for 中嵌套另一個(gè) v-for，例如：

<template>
  <div>
    <div v-for="(group, groupName) in groups" :key="groupName">
      <h3>{{ groupName }}</h3>
      <ul>
        <li v-for="item in group" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const groups = ref({
  Group1: [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ],
  Group2: [
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
  ],
});
</script>

在這個(gè)示例中，v-for="(group, groupName) in groups" 遍歷對(duì)象 groups 的每個(gè)組，并且每個(gè)組中的項(xiàng)再通過(guò)另一個(gè) v-for 遍歷生成 <li> 元素。

結(jié)合計(jì)算屬性和方法

你可以結(jié)合計(jì)算屬性或方法來(lái)處理數(shù)據(jù)，然后用 v-for 渲染結(jié)果。例如：

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
import { ref, computed } from 'vue';
const items = ref([
  { id: 1, name: 'Item 1', category: 'A' },
  { id: 2, name: 'Item 2', category: 'B' },
  { id: 3, name: 'Item 3', category: 'A' },
]);
const categoryFilter = ref('A');
const filteredItems = computed(() => {
  return items.value.filter(item => item.category === categoryFilter.value);
});
</script>

在這個(gè)示例中，filteredItems 是一個(gè)計(jì)算屬性，它會(huì)返回符合條件的數(shù)組項(xiàng)，然后通過(guò) v-for 渲染這些項(xiàng)。