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