Vue3 v-for ディレクティブ

Vue3 内置指令Vue3 組み込みディレクティブ

v-forディレクティブは、ソースデータに基づいて要素を複数回レンダリングするために使用され、Vue におけるリストレンダリングを実現する中核的なディレクティブです。

基本説明

v-forディレクティブは、配列またはオブジェクトに基づいて要素を繰り返しレンダリングします。これにより、類似した要素のグループを繰り返しレンダリングし、データソースの値を使用できます。

  • 期待される型: Array | Object | number | string | Iterable
  • 機能: リストレンダリング。ソースデータに基づいて要素を複数回レンダリングします。

基本構文

例

<!-- 配列の反復処理 -->
<li v-for="item in items">{{ item }}</li>

<!-- インデックス付きの反復処理 -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>

<!-- オブジェクトの反復処理 -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>

<!-- 数値の反復処理 -->
<li v-for="n in 5">{{ n }}</li>

使用シーン

1、配列の反復処理

例

<template>
  <ul>
    <li v-for="(fruit, index) in fruits" :key="index">
      {{ index + 1 }}. {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
fruits: ['苹果', '香蕉', '橙子', '葡萄']
    }
  }
}
</script>

2、オブジェクト配列の反復処理

例

<template>
  <table>
    <tr v-for="person in people" :key="person.id">
      <td>{{ person.id }}</td>
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      people: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
      ]
    }
  }
}
</script>

key の重要性

v-for では、各ループ項目に一意の key 属性を提供することを強く推奨します。これにより、Vue はリストを効率的に更新できます。

例

<!-- id を key として使用（推奨） -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Vue3 内置指令Vue3 組み込みディレクティブ

その他の拡張