v-for

f:id:utouto97:20210706233746p:plain

v-for

Vueでは、v-forを使うことで、配列の要素を一つずつ処理することができます。
例えば、v-forを使うことで、配列の要素をリスト表示するための<li>タグを繰り返し生成することができます。

v-forでは、value in list のようにすることで、listの要素を一つずつvalueにバインドして利用できます。
いくつかのプログラミング言語にあるforeachのようなイメージです。

実際には↓のように記述します。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

<li>タグをitemsの要素分作成するコードとなっています。

また、(value, index) in listのようにすることで、インデックスも取得することができます。

v-forをオブジェクトに使う

Vueでは、v-forでオブジェクトのプロパティを一つずつ取得することもできます。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

この場合でも、'(value, key) in object`とすることで、プロパティ名(キー)を取得することもできます。

参考

jp.vuejs.org

終わり