【Vue.js】v-forディレクティブで配列を簡単に繰り返し表示する方法

Vue.js

2023.02.082024.11.11

記事内に広告が含まれています。

Vue.jsでは、v-forディレクティブを使用することで配列の要素を繰り返し描画することができます。

今回は、このv-forディレクティブの使い方をご紹介していきます。

v-forディレクティブを使用したサンプルコード
v-forディレクティブの基本的な使い方
1. <script>タグ：TypeScriptコードの記述
2. <template>タグ：HTMLコードの記述
  1. v-forディレクティブ
indexを取得する方法
まとめ

v-forディレクティブを使用したサンプルコード

v-forディレクティブを使用して、配列の要素を繰り返し描画していきます。

サンプルコードは次のようになります。

<script lang="ts">
export default {
  data() {
    return {
      items: ["田中", "鈴木", "佐藤"],
    };
  },
};
</script>

<template>
  <div v-for="item in items" :key="item">
    {{ item }}
  </div>
</template>

サンプルコードを実行すると、配列内の

“田中”, “鈴木”, “佐藤”

という文字列がv-forディレクティブによって順番に表示されていることが分かります。

実行結果

Hello, world!

v-forディレクティブの基本的な使い方

v-forディレクティブの基本的な使い方を詳しく紹介していきます。

<script>タグ：TypeScriptコードの記述

<script lang="ts">
export default {
  data() {
    return {
      items: ["田中", "鈴木", "佐藤"],
    };
  },
};
</script>

<template>タグ：HTMLコードの記述

次に<template>タグ内にHTMLを記述していきます。

今回は<div>タグ内でv-forを使用して「items」配列の要素を繰り返し取得し、各要素を表示しています。

v-forディレクティブ

v-forはJavaの拡張for文と似ています。

v-for="item in items"と記述すると、「items」配列を反復処理し「items」配列内のすべての要素に対して<div>要素が生成されます。

今回は「items」配列をitems: [“田中”, “鈴木”, “佐藤”]と定義しているので、「item」には
　繰り返しの1回目は“田中”、
　繰り返しの2回目は“鈴木”、
　繰り返しの3回目は“佐藤”、
が入ります。

また、v-forではkey属性を与える必要があります。

key属性はv-bind:key="item.id"やv-bindの省略形の:key="item.id"で与えることができます。

keyに入れる変数はすべての要素に対して一意である必要があります。今回はkey属性を「item.id」とします。

<template>
  <div v-for="item in items" v-bind:key="item.id">
    {{ item }}
  </div>
</template>

indexを取得する方法

インデックス（繰り返し回数）を取得したい場合は"v-for=(item, index) in items"のように記述することで、インデックスを取得できます。

1つ目の引数は「items」配列の要素、
2つ目の引数はインデックスとなります。

サンプルコードではインデックスを「index」としています。

<template>
  <div v-for="(item, index) in items" v-bind:key="item.id">
    {{ index + 1 }}: {{ item }}
  </div>
</template>

実行結果

Hello, world!

{{ index + 1 }}: {{ item }}

まとめ

この記事では、Vue.jsのv-forディレクティブを使って、リストや配列の要素を繰り返し表示する方法をご紹介しました。

v-forを使うと、例えば名前のリストなど、複数のデータを簡単に表示できます。

ぜひ、ご自身の環境でも試してみてください！

v-forの活用例を知りたい方は、こちらの記事もぜひご覧ください！