他の言語を学んだ方は、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>
それぞれ、ご自身で仕組みを理解しながら、文字などをいじってみてください。
今回は、商品一覧ですが、ユーザー一覧のように変えても良いと思います。
同じように作るだけでは、理解が深まりません。
自分で色々試してみて、始めて理解が深まっていきます。