Vue.js初心者による初心者のための完全入門講座「第五回」
こんにちは、金子拓矢(@taku_twitt0622)です。
第五回となる今回では、「繰り返し文」について学んでいきます。
具体的には、配列を用意して、そこから1つずつ取り出してその内容を表示する、というのが繰り返し文ですが、
Vue.jsではこの繰り返し文を、ディレクティブ(v-からはじまるVueの用意してる便利な機能)を使うことによってhtmlファイル上で実現することができます!
それでは、早速解説に入っていきますね。
繰り返し文はこうやって実装する
繰り返し文は、「v-for」ディレクティブによって実装することができます。
具体的な使い方については、コードを書きながらの方が理解が早いと思うので、早速コードを書いていきましょう。
まずindex.jsにて、
// index.js
new Vue({
el: '#app',
data: {
dayOfWeeks: ['月','火','水','木','金']
}
});
この様に、配列dayOfWeeksを用意します。
次にindex.htmlです。
<!-- index.html -->
<div id="app">
<ul v-for="dayOfWeek in dayOfWeeks">
<li>{{ dayOfWeek }}</li>
</ul>
</div>
この様に記述してから、ブラウザを見てみましょう。
このようになっていれば成功です。
配列から取り出された月〜金が、順番に表示されていますね。
コード解説
では、コードの解説に入っていきます。
新しく出てきた文法としては、
<ul v-for="dayOfWeek in dayOfWeeks">
<li>{{ dayOfWeek }}</li>
ここですよね。
これ何をしているのかというと、
v-for="変数 in 配列"
としています。
liタグに関しては、その変数名をマスタッシュ構文で表示しているといった形です。
Vueの繰り返し文では、必ずこの「変数 in 配列」の形にする必要があります!
※ただし、必ずしもul、liタグを使う必要はありません。
ディレクティブがいくつも出てくると、少し混乱してくるかも知れませんが、1つずつ抑えていけば、内容はシンプルなので、大丈夫です!
オブジェクトの繰り返し文
次は、配列ではなく、オブジェクトを繰り返し文で表示してます。
まずおさらいとして、オブジェクトの中身は
キー : バリュー
によって構成されています。
では、コードを書いていきましょう。
先ほどのdataは消して、
data: {
memoLists: {title: '12月25日',text: 'おはようクリスマス'}
}
にします。
次に、index.htmlです。
<!-- index.html -->
<div id="app">
<p v-for="v, k in memoLists">
{{ k }}: {{ v }}
</p>
</div>
このように書いてブラウザを開くと、
このように、キーとバリューが表示されているのがわかると思います!
v-for="バリュー用の変数, キー用の変数 in オブジェクト"
とすることで、オブジェクトの中身を表示することができます!
配列の中にオブジェクトを作り、繰り返し文を使うことにより、もっと実践的な実装ができるのですが、今回は割愛します。
さて、少し後半駆け足になってしまいまたが、いかがだったでしょうか?
配列というと結構プログラミング思考なところがありますが、それをhtmlファイル上で実行できるところが、すごく魅力的なんじゃないかと思います。
さて、次回からはいよいよTodoアプリの開発に取り掛かっていきたいと思います!
まだ説明不足な点については、実際に開発を進めつつ丁寧に解説をしていきます!
それでは、最後まで読んでいただきありがとうございました!
この記事が気に入ったらサポートをしてみませんか?