Vue.jsにおける条件分岐とv-showによる表示・非表示の切り替え

2021-02-28

Vue.jsにおけるif文やv-showによる表示の切り替えについて解説します。

v-showによる表示・非表示の切り替え

v-showは真偽値によって表示の切り替えをすることができます。

具体的にはfalseの時に、display:noneが付与され非表示になります。

<div id="app">
  <input type="checkbox" v-model='check'>
  <div v-show="check">チェック済</div>
</div>

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

デフォルトの状態ではチェックが入っておりtrue。チェックを入れるとfalseに切り替わり、チェック済みの文言が非表示になります。

v-ifは真偽値を判定し、trueの場合はこれ、falseの場合はこれ、といった具体で条件分岐を記述できます。

同じコードでv-showの部分をv-ifに変更してみます。

<div id="app">
  <input type="checkbox" v-model='check'>
  <div v-if="check">チェック済</div>
</div>

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

結果は全く同じになります。ifがtrueの場合はチェック済みが表示され、falseの場合(チェックが外れている場合)は非表示になります。

上記のコードでは同じような結果を得ることができましたが、両者の違いはなんでしょうか？

まず、v-showは非表示にdisplay:noneを使用していると言いました。一方のifは要素自体が消える点に注目です。

v-showの方がレンダリングコストが低く、v-ifの場合はレンダリングコストが高くなります。

頻繁にオン/オフの切り替えがある場合はv-showを選択する方がベターだと思います。

ただし、ifは単なる表示/非表示よりも条件分岐をしたい時に活用できます。

<div id="app">
  <input type="checkbox" v-model='check'>
  <div v-if="check">チェック済</div>
  <div v-else="check">チェック未</div>
</div>

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

チェックを外した場合、つまりfalseの場合「チェック未」の表示に切り替わります。

他にもelse if にも対応しています。
<div id="app">
<div v-if="age >= 40 ">40代以上</div>
<div v-else-if="age >= 30 ">30代</div>
<div v-else>30代未満</div>
</div>

new Vue({
  el: '#app',
  data: {
    age: 30
  }
})