vuejs v-forでループを試してみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

v-forでループを試してみよう

Vue.js|2019年02月05日

2019年02月05日
  • このエントリーをはてなブックマークに追加

他の言語を学んだ方は、for文を覚えているかもしれません。
ある一定の処理を繰り返す書き方ですね。

Vue.jsではディレクティブとして、直接タグに書き込む形で繰り返し可能です。
例えば、商品リストなど、ずらっと一覧表示させることができます。

記事一覧を表示させる時もそうです。

記事を表示させるHTMLを、記事の分だけ繰り返したりします。
ある一定のHTMLタグを、データに応じて繰り返すのは、よく見る処理ですね。

今回のミッションは、v-forというディレクティブでループを使うことです。
それではさっそく、ミッションを見ていきましょう。

今回のミッション

百聞は一見にしかずということで、下記のサンプルを確認してみてください。
商品データが一覧で表示されています。

こちらの処理を、ソースコードの解説を参考に作ってみましょう。
構造としては、Vue.jsの中で、商品データを格納しています。
格納されたデータを、v-forで一覧出力していきます。

もし、どうしても分からなければ、参考ファイルをダウンロードできます。
ファイルをダウンロードして、確かめてみましょう。

まずは、ソースコードを見ながら、意味を理解してみてください。
意味を理解したら、サンプルと同じ機能を作り始めましょう。
とにかく、作って自分で試してみることが大切です。

ソースコードの解説

今回使う、すべてのソースコードを載せます。
少しずつ、難しくなってきたかもしれません。
こちらを見ながら、実際にご自身でも作ってみてください。

<div id="app">
    <ul>
        <!--商品のリストを一覧で出力します。-->
        <!--v-forで商品データ一覧をループして表示します-->
        <!--v-forはよくあるfor文のようなものです-->
        <!--商品一覧はitemsに保持されています-->
        <!--itemsに保持されたデータをv-forでitemslistshowに格納し直します-->
        <!--itemslistshow in itemsが出力用に格納し直すタグです-->
        <!--itemslistshowもitemsも、任意で自由に名前を決められるものです-->
        <!--{{}}でデータを出力します-->
        <li v-for="itemslistshow in items">{{itemslistshow.product}}:{{itemslistshow.price}}円</li>
        <!--下記は連番でclassをつける方法です。試してみてください。-->
        <!--<li v-for="(itemslistshow, index) in items" v-bind:class="['productList' + index]">{{itemslistshow.product}}:{{itemslistshow.price}}円</li>-->
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //アイテムのデータを一覧で持たせます。
            //それぞれ、複数のデータをもたせることができます。
            items: [
                { id: 0,product:'最新のmac',price:9000 },
                { id: 1,product:'少し前のmac',price:8000 },
                { id: 2,product:'昔のmac',price:7000 },
                { id: 3,product:'ダメなmac',price:6000 },
                { id: 4,product:'壊れたmac',price:5000 },
            ]
        }
    })
</script>

それぞれ、ご自身で仕組みを理解しながら、文字などをいじってみてください。
今回は、商品一覧ですが、ユーザー一覧のように変えても良いと思います。

同じように作るだけでは、理解が深まりません。
自分で色々試してみて、始めて理解が深まっていきます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら