【Vue.js】v-if、v-showで要素の表示をコントロール

Web

Vue.jsで要素の表示・非表示を制御するには v-if ディレクティブ、v-showディレクティブを使います。

ここでは簡単な使い方の説明と、2つのディレクティブの違いについて解説します。

v-if

v-if は、指定した値(式)の真偽値によって要素の表示・非表示を制御します。

では簡単な例を見てみましょう。

<div id="app">
  <p v-if="show">テキスト</p>
  <button @click="show=!show">切替</button>
</div>
const app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})

pタグのテキストは、show=true の場合は表示され、show=falseの場合は非表示になります。

v-if は、v-else-if 、 v-else を使うことで条件を分岐することができます。

<div id="app">
  <p v-if="show==1">One</p>
  <p v-else-if="show==2">Two</p>
  <p v-else-if="show==3">Three</p>
  <p v-else>Over</p>
  <button @click="show++">切り替え</button>
</div>
const app = new Vue({
  el: '#app',
  data: {
    show: 1
  }
})

v-show

v-show は、 v-if と考え方は同じです。指定した値(式)の真偽値によって要素の表示制御を行います。

<div id="app">
  <p v-show="show">テキスト</p>
  <button @click="show=!show">切り替え</button>
</div>
const app = new Vue({
  el: '#app',
  data: {
    show: true 
  }
})

v-if と v-show の違いは?

違いの1つは、表示の切り替えやすさにあります。

例えば、次のように v-if を用いた実装をしたとします。

<div id="app">
  <p v-if="show1">要素A</p>
  <p v-else-if="show2">要素B</p>
  <p v-else>要素C</p>
</div>

これを v-show で実装しようと思うと次のようにする必要があります。

<div id="app">
  <p v-show="show1">要素A</p>
  <p v-show="!show1 && show2">要素B</p>
  <p v-show="!show1 && !show2">要素B</p>
</div>

このように v-show で表示の切り替えを実装しようと思うと、条件が複雑になる場合があります。

違いのもう1つは、非表示の方法にあります。

v-if はDOMから削除するのに対し、v-show はDOMにはあるがページ上は見えないようにします(display: hidden)。

そのため再表示した場合、v-if はDOMを再生成するため時間がかかる場合があります。一方 v-show は、ページ上で見えるようにプロパティが変更されるだけなので、こちらのほうがレスポンスがいいといえます。

また入力フォームなどを表示・非表示にする場合、v-ifは入力した内容が消えてしまいますが、v-showはそのまま残ります。

これらを考慮して、どちらを使うか検討してみてください。

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました