Vue v-for

1. Vue v-for ディレクティブの基本

通常の JavaScript で配列に基づいて HTML 要素を作成する場合、通常は for ループを使用し、その内部で要素の作成、調整、そしてページへの追加というステップを手動で行う必要があります。さらに、作成された要素は配列の変更に対して自動で反応（リアクト）することはありません。

一方で Vue を使用する場合、リスト化したい HTML 要素に属性として v-for を記述し、Vue インスタンス 内の配列を参照するだけで、残りの処理はすべて Vue が自動的に行います。v-for で作成された要素は、配列が変更されると自動的に更新されます。

2. リストレンダリング (List Rendering)

Vue における リストレンダリング は v-for ディレクティブを使用して行われ、for ループによって複数の HTML 要素が生成されます。

以下に、v-for を使用した3つの異なる例を紹介します。

2.1 例：配列に基づくリスト表示

配列のアイテムに基づいてリストを表示します。

<ol>
  <li v-for="x in manyFoods">{{ x }}</li>
</ol>

3. 配列のループ処理

配列をループして、異なる画像を表示する例です。

3.1 例：画像のリスト表示

Vue インスタンス 内の配列に基づいて、食べ物の画像を表示します。

<div>
  <img v-for="x in manyFoods" v-bind:src="x">
</div>

4. オブジェクト配列のループ処理

オブジェクト の配列をループし、そのプロパティを表示します。

4.1 例：画像と名前の表示

Vue インスタンス 内の配列に基づいて、食べ物の画像と名前の両方を表示します。

<div>
  <figure v-for="x in manyFoods">
    <img v-bind:src="x.url">
    <figcaption>{{ x.name }}</figcaption>
  </figure>
</div>

5. インデックス（添字）の取得

JavaScript の for ループにおいて、配列要素の インデックス番号 は非常に有用です。幸いなことに、Vue の v-for でもこのインデックス番号を取得することができます。

v-for でインデックスを取得するには、括弧内にカンマで区切られた2つの単語を指定します。最初の単語が配列の要素（値）になり、2番目の単語がその要素のインデックスになります。

5.1 例：インデックスと要素名の表示

Vue インスタンス 内の manyFoods 配列にある要素のインデックス番号と食べ物名を表示します。

<p v-for="(x, index) in manyFoods">
  {{ index }}: "{{ x }}" <br>
</p>

また、配列の要素が オブジェクト である場合、インデックスとオブジェクト内の情報の両方を表示することも可能です。

5.2 例：オブジェクト配列でのインデックス取得

manyFoods 配列内のオブジェクトから、インデックス番号と特定のテキスト（名前とURL）を表示します。

<p v-for="(x, index) in manyFoods">
  {{ index }}: 名前は "{{ x.name }}"、URLは "{{ x.url }}" <br>
</p>