Vue.js入門第二回。条件分岐、繰り返し、イベント制御のやり方をまとめます。
はじめに
Vue.jsで条件分岐による出し分けと繰り返し処理、クリックなどのイベント制御を実装してみたいと思います。
ソースコード
解説
Javascriptは割愛しますが、
- 条件分岐確認用のtoggle
- 繰り返し確認用のcolors配列、userオブジェクト
- イベント制御確認用のnowとonclick関数
を定義しています。
関数はmethodsに定義します。
条件分岐：v-if、v-show
条件分岐はv-if、v-showディレクティブを使います。ここではtoggleが真の時はp要素を表示し、偽の時はp要素を非表示にしています。
JSFiddleのtoggleプロパティをfalseに変更すると非表示になります。
<p v-if="toggle">Hello v-if</p>
<p v-show="toggle">Hello v-show</p>v-ifとv-showの違い
v-ifディレクティブは要素自体の表示非表示を切り替えるのに対し、v-showは要素は常に存在しCSSのdisplayプロパティで表示非表示を切り替えています。
表示非表示を頻繁に切り替える場合はv-showを使うことで描画コストを下げることができます
繰り返し処理：v-for
繰り返しはv-forディレクティブを使います。colors配列、usersオブジェクトの中身を表示しています。
(value, key)とすることでオブジェクトのキー値を参照することが出来ます。value、keyの順番で指定しないと逆で展開されてしまいます。
<ol>
<li v-for="color in colors">{{ color }}</li>
</ol>
<ul>
<li v-for="value in user">{{ value }}</li>
</ul>
<ul>
<li v-for="(value, key) in user">{{key}} : {{value}}</li>
</ul>イベント制御：v-on
クリックなどのイベント制御はv-onディレクティブを使います。
ここではボタンがクリックされたらonclick関数を呼び出すという実装にしています。
onclick関数の中ではnowプロパティに現在日時を設定しており、マスタッシュ構文でnowプロパティをpタグで表示しています。
つまりボタンがクリックされるたびに現在日時が表示されるようになっています。
<button v-on:click="onclick">Click</button>
<p>{{ now }}</p>まとめ
- 条件分岐にはv-if、v-showディレクティブを使う。ケースバイケースでどちらを使うか意識する。
- 繰り返しにはv-forディレクティブを使う。
- イベント制御にはv-onディレクティブを使う。
jQueryと比べてかなりシンプルに実装できることが感じれますね。
えず
東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。
