【Vue.js】v-forディレクティブの使い方について解説します。

なやむくん

Vueで同じ要素を繰り返し表示させたい。

なやむさん

v-forの使い方がよくわからない

などの疑問や悩みを解決してまいります。

通常HTMLでは同じ要素を繰り返し表示する場合は、一つ一つ記述しなくてはなりません。

その要素が多ければ多いほど記述量も増えてコード自体も見づらくなってしまいます。

しかしVue.jsでは同じような要素をv-forディレクティブを使用して表示させることで、短いコードで簡単に繰り返し表示させることが可能です。

今回はv-forディレクティブの使い方について解説していきます。

みつた

v-forディレクティブは頻繁に使用するディレクティブなのでこの記事でしっかり覚えてマスターしましょう。

Table of Contents

v-forディレクティブとは

v-forディレクティブは、配列やオブジェクトのデータを使ってリストやテーブルなどの要素を繰り返し表示するための機能です。

今回はいろいろなパターンで使用例を紹介していきたいと思います。

配列データを繰り返し表示する

以下の配列を用意しました。

<script setup>
  const dataItem  = ['HTML','CSS','JavaScript','Vue','React']
</script>

定数dataItemにプログラミング言語を５つ入れたシンプルな配列データです。

これをリスト形式で表示してみたいと思います。（styleはお好みで調整してください）

<script setup>
const dataItem = ['HTML', 'CSS', 'JavaScript', 'Vue', 'React']
</script>

<template>
  <div class="container">
    <ul>
      <li v-for="item of dataItem">{{ item }}</li>
    </ul>
  </div>
</template>

すると以下のように簡単に配列データを一つずつ取り出して表示できていることが分かります。

このように繰り返し表示させたい要素でv-forディレクティブを指定してあげることで繰り返し表示することができます。

みつた

v-forディレクティブの指定で「of」を使用していますが、「of」は配列データから値をひとつずつ取り出すことができます。つまり今回はdataItemの配列データからひとつずつitemに代入し表示させているような形になります。

オブジェクトのデータを繰り返し表示する

次はオブジェクトのデータを表示させていきたいと思います。

以下のようなオブジェクトデータを作成しました。

<script setup>
  const tableHeads = ['No','名前','年齢','好きなプログラミング言語' ]
  const tableLists = [
    { id: 1, name: '鈴木 一郎', age: 31, favoriteProgrammingLanguage: 'HTML' },
    { id: 2, name: '鈴木 二郎', age: 25, favoriteProgrammingLanguage: 'Vue' },
    { id: 3, name: '鈴木 三郎', age: 29, favoriteProgrammingLanguage: 'JavaScript' },
    { id: 4, name: '鈴木 四郎', age: 22, favoriteProgrammingLanguage: 'Python' },
    { id: 5, name: '鈴木 五郎', age: 45, favoriteProgrammingLanguage: 'PHP' }
  ]
</script>

まず定数tableHeadにはthタグの中身をそれぞれ入れています。

定数tableListsには各エンジニアのプロフィールと好きなプログラミング言語を入れています。

このデータを使ってテーブルを作成すると以下のようなコードになります。（styleはお好みで調整してください）

<script setup>
  const tableHeads = ['No','名前','年齢','好きなプログラミング言語' ]
  const tableLists = [
    { id: 1, name: '鈴木 一郎', age: 31, favoriteProgrammingLanguage: 'HTML' },
    { id: 2, name: '鈴木 二郎', age: 25, favoriteProgrammingLanguage: 'Vue' },
    { id: 3, name: '鈴木 三郎', age: 29, favoriteProgrammingLanguage: 'JavaScript' },
    { id: 4, name: '鈴木 四郎', age: 22, favoriteProgrammingLanguage: 'Python' },
    { id: 5, name: '鈴木 五郎', age: 45, favoriteProgrammingLanguage: 'PHP' }
  ]
</script>

<template>
  <div class="container">
    <table>
      <tr>
        <th v-for="tableHead of tableHeads">{{ tableHead }}</th>
      </tr>
      <tr v-for="tableList in tableLists" :key="tableList.id">
        <td>{{ tableList.id }}</td>
        <td>{{ tableList.name }}</td>
        <td>{{ tableList.age }}</td>
        <td>{{ tableList.favoriteProgrammingLanguage }}</td>
      </tr>
    </table>
  </div>
</template>

表示結果は以下になります。

今回この内容ではv-forディレクティブで繰り返し表示することでコードの記述量がかなり少なくなることが分かるかと思います。

このように扱うデータが多ければ多いほどv-forディレクティブはかなり便利になっていきます。