初心者向け

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

vue-introductory-course-v-if

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

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

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

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

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

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

jsFiddleというオンラインエディタを使用しています。
>> jsFiddle

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-elseはv-if, v-else-ifの次の行に配置する必要があります!

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

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

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

実際に見てみましょう。

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

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

v-if

要素を削除する

v-show

要素を非表示にする
(display: none)

デベロッパーツールで確認できます!

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

つまり、表示を

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

を使用しましょう!

v-showにはv-elseのようなものは存在しないので注意!

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

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

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

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

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

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

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

v-showは属性を追加する必要があるのでtemplateタグには使えません!

まとめ

  • 条件付きレンダリング
    • v-if, v-else, v-else-if が存在する
    • v-ifとv-showは似ているが要素を削除するかどうかの違いがある
  • 複数の要素にv-ifを適用させたいときはtemplateタグを使う

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