基本的な使い方
<tag v-for="変数 in 配列">
とすることで、変数に配列の要素が逐次格納されます。
例1:ulを用いた箇条書き
<ul v-for="変数名 in 配列名"> <li>{{変数名}}</li> </ul>
とすることで、指定した配列を箇条書きできます。
See the Pen
v-for ul by purple_hat (@purple_hat)
on CodePen.
例2:クラスをulで列挙
<ul v-for="変数名 in 配列名"> <li>{{変数名.メンバ変数1}}</li> </ul>
とすることで、クラス配列も箇条書きできます。
See the Pen
v-for class-ul by purple_hat (@purple_hat)
on CodePen.
例3:tableの列挙
<tbody v-for="変数名 in 配列名"> <tr> <td>{{変数名}}</td> </tr> </tbody>
とすることで、テーブルに配列を記述することも可能です。
See the Pen
v-for table by purple_hat (@purple_hat)
on CodePen.
例4:連想配列の列挙
<ul v-for="(キー, 値) in items"> <li>{{キー}} : {{値}}</li> </ul>
とすることで、連想配列も表示できます。
See the Pen
Untitled by purple_hat (@purple_hat)
on CodePen.