【Vue3】v-forとは?使い方を紹介する

v-forとは?

html(DOM)を繰り返し表示させたい時に便利なディレクティブです。

リストを表示するときなどに使えます。

v-forの書き方

v-forの書き方を説明します。

基本形

v-forは値の部分に、item in itemsの形式で書く必要があります。

itemsがデータソースで、itemがループ後に使用出来る単体データです。

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      let items = reactive(['apple', 'orange'])
      return {
        items
      }
    }
  }
</script>


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

v-forのindexとは

(item, index) in itemsのようにitemのパートに二つ目の引数をとることで、indexを取り出すことができます。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item">
      {{ index + ' - ' + item }}
    </li>
  </ul>
</template>

v-forのkeyとは

v-forを使う時は一緒にv-bindでkey属性を追加することが推奨されています。

そうすることで、データソースの値を、後から操作した時に整合性ととれた挙動になります。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item">
      {{ index + ' - ' + item }}
    </li>
  </ul>
</template>

キー付き v-for | スタイルガイド | Vue.js

v-forで連想配列をループする

v-forのデータソースにJavascriptの連想配列を取ることもできます。

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      let object = { name: 'apple', count: 1 }
      return {
        object
      }
    }
  }
</script>


<template>
  <ul>
    <li v-for="(value, name, index) in object" :key="index">
      {{ index + ' - ' + name + ' : ' + value }}
    </li>
  </ul>
</template>

v-forで指定回数ループする

v-forのデータソースに整数を指定することで、指定した回数だけ要素をループさせることができます。

<template>
  <ul>
    <li v-for="n in 5" :key="n">
      {{ n }}
    </li>
  </ul>
</template>

v-ifとv-forを同時に使う

v-if と v-for を同時に利用することは 推奨されません。

これは同じ要素にv-ifv-forを使用することが推奨されないという意味です。回避するにはv-forの中の要素でv-ifを使用することが公式サイトで推奨されています。

公式サイトで推奨されている回避方法を紹介します。

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      let items = reactive([{ name: 'apple', isView: true }, { name: 'orange', isView: false }])
      return {
        items
      }
    }
  }
</script>


<template>
  <ul>
    <template v-for="item in items" :key="item.name">
      <li v-if="item.isView">
        {{ item.name }}
      </li>
    </template>
  </ul>
</template>

v-for と v-if | リストレンダリング | Vue.js