サンプルコードから基礎を学ぶ！Vue.js入門講座！【v-if編】

今回はこのような質問をいただきました。

v-ifの使い方がわからない…v-ifってどうやって使うんだっけ？

今回は条件付きレンダリング(v-if)について解説していきます。

超初心者向けVue.js入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

v-ifを使って条件付きレンダリング！

v-ifは条件付きレンダリングを行うためのものです。

if文をイメージしていただければわかりやすいと思います。

条件がtrueであれば表示、falseであれば非表示にすると言ったイメージです。

では実際にサンプルコードを見てみましょう。

このように、ある条件で表示を切り替えるために使用するのがv-ifになります。

v-elseを使って逆の条件の処理を行う！

ifがあるならelseもありますよね。

v-ifがfalseの場合の処理はv-elseを使用します。

ではサンプルコードを見てみましょう。

このようにv-ifがfalseのときの処理を行うのがv-elseになります。

v-else-ifを使って別の条件の処理を追加する！

if, elseときたら…else-ifですよね。

v-ifに更に別の条件の処理を追加したい場合はv-else-ifを使用します。

サンプルコードを見てみましょう。

このように別の条件の処理を追加していくときはv-else-ifになります。

おまけ：表示は同じだけどv-showは隠してるだけ！

v-ifと非常に似ているディレクティブとしてv-showがあります。

どちらも目に見える動きは同じです。

実際に見てみましょう。

では何が違うのでしょうか？

実は非表示となったときの処理に次のような違いがあります。

v-showは最初にすべて表示してから隠すので初期描画が遅いのですが、表示の切り替えは速いです。

つまり、表示を

• あまり切り替えない場合はv-if
• 頻繁に切り替える場合はv-show

を使用しましょう！

複数の要素に対して使いたいときはtemplateタグを使う！

HTML5にはtemplateタグというものが存在します。

こちらを使用することで複数の要素を扱うことができます。

デベロッパーツールを使用してElementsを見てもらえればわかるのですが、templateタグは全く表示されません。

要素をグループ化させるためだけに存在しています。

このようにtemplateタグを使用してグループ化することで、表示に影響を与えずにv-ifを複数の要素に適用できます。

複数の要素にv-ifを適用させたいときはtemplateタグを使用しましょう！

まとめ

ぜひv-ifを使ってみてください！