Vueでの配列の繰り返し処理

Vueでは、ループを使用してタグを生成することができます。 これは特別なディレクティブ v-for を使用して行います。 配列に対してどのように動作するか見てみましょう。 次の配列を作成します：

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

この配列の各要素を個別の段落として表示してみましょう。 そのために、まずビューに段落を作成します：

App.vue<template>
  <p></p>
</template>

次に、段落にディレクティブ v-for を記述します。 このディレクティブの値には、繰り返し処理する配列の名前と、 その配列の要素が順次代入される変数を指定する必要があります。 この場合、配列の名前は arr、 変数の名前は elem とします：

App.vue<template>
  <p v-for="elem in arr"></p>
</template>

結果として、この段落は配列の要素数分だけ繰り返されます。 繰り返し処理される要素を段落のテキスト内に表示してみましょう：

App.vue<template>
  <p v-for="elem in arr">{{ elem }}</p>
</template>

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}