【Vue.js】v-forの使い方をサンプルコードで解説

2020年12月8日

手っ取り早くこのページのサンプルコードを検証するには、下記のvueライブラリを事前に読み込んでおいてください。

v-forとは？要素をループさせ表示できる機能

v-forとは、要素やdataで定義した配列、オブジェクトを繰り返しを行えるレンダリング手法です。

v-for="値 in 配列orオブジェクト"

基本サンプルコード

<div id="app-1">
    <ul>
        <li v-for="val in aryList">{{ val }}</li>
    </ul>
</div>

<script>
new Vue({
    el: '#app-1',
    data: {
        aryList : ['fuga', 'hoge', 'piyo'],
    }
});
</script>

key（キー）も取得

v-for="(値, キー) in 配列orオブジェクト"

と書くことで、値とキーを同時に取得できます。

<div id="app-2">
    <ul>
        <li v-for="(val, key) in aryList">{{ key }} : {{ val }}</li>
    </ul>
</div>

<script>
new Vue({
    el: '#app-2',
    data: {
        aryList : ['fuga', 'hoge', 'piyo'],
    }
});
</script>

オブジェクトも可能

<div id="app-3">
    <ul>
        <li v-for="(val, key) in aryObj">{{ key }} : {{ val }}</li>
    </ul>
</div>

<script>
new Vue({
    el: '#app-3',
    data: {
        aryObj : {fuga : 'ふが', hoge : 'ほげ', piyo : 'ぴよ'},
    }
});
</script>

for文のような繰り返し回数指定のループ

v-for="数値 in カウント数"

と書くことで、for文のような指定回数の繰り返しループが可能です。

基本サンプルコード

<div id="app-4">
    <ul>
        <li v-for="i in 5">{{ i }}</li>
    </ul>
</div>

<script>
new Vue({
    el: '#app-4'
});
</script>

0から数えたい場合

keyを指定することで0からカウントが可能。

<div id="app-5">
    <ul>
        <li v-for="(n, i) in 5">{{ i }}</li>
    </ul>
</div>

<script>
new Vue({
    el: '#app-5'
});
</script>

繰り返し時に要素は含めたくない場合

サンプルコードではli要素を繰り返していましたが、あえて要素を指定せず、繰り返し処理の中身だけ表示させたい場合は、templateというタグを使用できます。

templateは要素としては表示されず、中身のみ（ノード）を繰り返すことが出来ます。

<div id="app-6">
    <template v-for="val in aryList">
        {{ val }}
    </template>
</div>

<script>
new Vue({
    el: '#app-6',
    data: {
        aryList : ['fuga', 'hoge', 'piyo'],
    }
});
</script>

---

以上、v-forの使い方をサンプルコードで解説、でした。