format_list_bulleted
【Vue.js】v-ifディレクティブとv-elseディレクティブの書き方・使い方について解説
最終更新日時:2020-05-03 12:49:36



Vueを使って開発するときにはv-ifディレクティブを使うことによって表示を簡単に切り替えることができます。v-ifと関連したv-elseディレクティブを使うとさらに詳細な条件分岐による表示の切り替えもできるので同時に勉強していきましょう。

Vueのv-ifディレクティブ・v-elseディレクティブとは?

v-ifディレクティブは表示の切り替えをしたい要素に指定することで、指定した値の真偽値によって表示を切り替えるディレクティブです。v-ifディレクティブで指定した値がtrueであればその要素は表示され、falseであれば表示されません。

Vueのv-ifディレクティブ・v-elseディレクティブの使い方

それでは実際のv-ifディレクティブの書き方について説明していきます。

Vueのv-ifディレクティブの文法

v-ifディレクティブ・v-elseディレクティブは次のように書きます。

(index.html)

<p v-if ="条件式">AAA</p>
<p v-else>BBB</p>

v-ifディレクティブが指定した条件式がtrueの時は v-ifディレクティブを持つHTML要素が表示されます。v-elseディレクティブを持つhtml要素はv-ifディレクティブで示した条件式がfalseのときに代わりに表示されます。

Vueのv-ifディレクティブ・v-elseの実装例

変数isShowの値によって表示が切り替わるpタグを実装してみましょう。

(index.html)

<div id="app">
  <p v-if ="isShow">表示されています</p>
  <p v-else>隠し要素が表示されています。</p>
</div>

(app.js)

new Vue({
   el:'#app',
   data:{
    isShow:true
   }
})

v-ifディレクティブに指定されているisShowという値はtrueなので、v-ifディレクティブを持つpタグの「表示されています」が表示され、v-elseを持つHTML要素はshowの値がfalseとなるとき表示され、v-ifディレクティブを持つhtml要素は表示されません。

v-showディレクティブとv-ifディレクティブの違い

v-showディレクティブの説明

v-ifディレクティブと同じく、v-showディレクティブも要素の表示の切り替えをします。しかし、v-showディレクティブはcssのdisplay要素を切り替えているだけで、v-ifディレクティブのように要素自体が消えたり、生成されたりしているわけではありません。

 v-showディレクティブの実装例

v-showディレクティブは次のように書きます。

(index.html)

<h1 v-show="isShow">Hello</h1>

(app.js)

new Vue({
 el:"#example",
 data{
  isShow:false,
 }
})

要素の表示がされていないことがわかります。ページを検証してみると、要素のdisplayプロパティがnoneとなっているだけで、要素自体は存在することがわかります。isShowをtrueにすると表示されます。

 

この記事のまとめ

本記事ではVueのv-ifディレクティブを、実際の実装例を元に説明しました!最後に記事の要点をまとめてみましょう。

  • v-ifディレクティブでは紐づけられた変数の真偽値によって指定されているHTML要素の有無を動的に切り替えることができる。
  • v-ifディレクティブはDOM操作で要素を切り替える。
  • v-showディレクティブは要素のdisplayプロパティの値で表示を切り替える。

Vueのv-ifディレクティブを是非活用してみましょう!