v-for
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`とすることで、プロパティ名(キー)を取得することもできます。
参考
終わり