v-for(forループ)のサンプルコード

いわゆるループ文、Vue.js版v-forの使い方のサンプルコードです。

v-forのサンプルコードの概要

食べ物の名前とその色のデータを配列に入れ、順番に表示させるサンプルコードを書いてみます。

実際のサンプルはこちら

サンプルコード

<template>
    <div class="v-for-component">
        <ul class="foods">
            <p>食べ物のリスト</p>
            <li v-for="food in foods" :key="food.name">
                名前：{{food.name}} 色：{{food.color}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            foods: [
                {name: "banana",color:"yellow"},
                {name: "apple",color:"red"},
                {name: "peach",color:"pink"},
            ],

        }
    }
}
</script>

<style scoped>

</style>

解説

    data(){
        return{
            foods: [
                {name: "banana",color:"yellow"},
                {name: "apple",color:"red"},
                {name: "peach",color:"pink"},
            ],
        }

まずはデータの形を見てみましょう。

foodsと言う配列を作っています。

その中に{name: “banana”,color:”yellow”}といったようにデータを入れています。

あとはこのデータをどうやって順番に表示させるかです。

            <li v-for="food in foods" :key="food.name">
                名前：{{food.name}} 色：{{food.color}}
            </li>

ポイントはもちろんv-forです。

v-for=””の中には、表示したい配列を入れるわけですが、その際に

“〇〇 in 配列”

とします。〇〇の名前は配列をループする際に使います。

今回なら、配列名がfoodsです。そして展開する個別の変数名をfoodとしています。

そのため

v-for="food in foods"

となります。

:key="food.name"

は名前の通りキーです。ヒントを与えることで例えば配列を並び替えてもエラーをしないようにしています。

名前：{{food.name}} 色：{{food.color}}

あとはこのように個々のデータを表示させればオッケーです。

もし不明な点があれば公式ドキュメントを参照ください。