パープルハット

※当サイトではGoogleアドセンス広告を利用しています

Vue3 v-forで要素の列挙



基本的な使い方

<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.