快捷導(dǎo)航

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

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

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

基本用法

遍歷數(shù)組

當(dāng)你有一個數(shù)組，并且希望根據(jù)數(shù)組的內(nèi)容生成一組元素時，可以使用 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>

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

:key 是一個唯一的標(biāo)識符，用于幫助 Vue 識別每個列表項的身份，以優(yōu)化渲染性能。遍歷對象

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

<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>

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

使用索引

你可以通過 v-for 的第二個參數(shù)訪問當(dā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>

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

嵌套 v-for

你可以在 v-for 中嵌套另一個 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>

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

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

你可以結(jié)合計算屬性或方法來處理數(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>

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