【Vue.js】条件分岐で要素を表示/非表示（v-if・v-showディレクティブ）

はじめに

Vueではv-showとv-ifを用いることで条件分岐により要素の表示/非表示の切り替えを行うことができる。

v-if　v-show

指定した値の真偽値によって要素を表示/非表示にする。

sample.html

<template>
 <!-- showの値がtrueの場合はpタグが表示され、falseの場合は非表示 -->
 <p v-if="show">テキスト</p>
 <p v-show="show">テキスト</p>
</template>

sample.js

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

v-ifとv-showの違い

下記のコードは条件を満たさなかった場合の両者の状態↓

sample.html

<!-- v-if -->
<!---->
<!-- v-show -->
<p style="display: none;">テキスト</p>

v-ifはコメント化され、v-showはスタイルが付与されている。

v-if

条件が満たされなかった場合、DOM要素自体が削除される。

v-show

スタイルとしてdisplay: none;が付与され非表示の状態になる

DOMとは？

HTMLやCSS、javascriptなどによって構築されたものをブラウザが解釈したもの。
ブラウザのデベロッパーツールなどで見ることができるソースコードはDOMツリーと呼ばれるDOMの表現。

v-ifのグループ化

v-ifは単一な要素に付与する必要があるが、いくつかの要素を同時に切り替えたい場合は<template>タグで囲うことでまとめることができる。
※v-showでは利用できない

sample.html

<template v-if="show">
 <p>タイトル</p>
 <p>テキスト</p>
</template>

v-else-ifおよびv-elseによる条件分岐

Vueでもif文のように複数の条件分岐が可能。v-else-ifとv-elseを組み合わせることで複数の条件を指定できる。

sample.html

<template>
 <p v-if="type === A">
   タイプは A
 </p>
 <p v-else-if="type === B">
   タイプは B
 </p>
 <p v-else>
   A でも B でもない
 </p>
</template>

v-else-ifとv-elseはv-ifまたはv-if-elseを付与した要素の直後でなければ機能しない。
↓以下のようにpタグにv-ifを付与した場合、複数のpタグはそれぞれネストして子要素となっており連続していないので要素を表示/非表示することはできない。

sample.html

<template>
  <div>
    <h2>タイプ</h2>
    <p v-if="type === A">
       タイプは A
    </p>
  </div>
  <div>
    <h2>タイプ</h2>
    <p v-else-if="type === B">
       タイプは B
    </p>
  </div>
</template>