Vue.jsのv-if【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのv-ifについて、簡単に解説していきます。

v-ifとは

Vue.jsのv-ifでは要素の有無を設定できます。

<div id="app">
  <span v-if="visible">ほげ</span>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    visible: true
  }
})
</script>

上記のように書くと、appのvisibleプロパティの真偽によってspan要素の有無が決定します。

例えば、ここでappのvisibleプロパティをfalseにすると、ほげを含むspan要素が丸ごと消えます。

v-elseが使える

v-ifがあればv-elseも使えます。

v-elseを書くと、v-if側が消えるときにv-else側が表示されます。

<div id="app">
  <span v-if="isMobile">モバイル</span>
  <span v-else>非モバイル</span>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    isMobile: true
  }
})
</script>

上記の例では、isMobileプロパティの真偽によって、モバイルと非モバイルの表示を切り替えています。

v-else-ifもある

v-else-ifもあります。

もちろんv-ifや同じv-else-ifの後でしか使えません。

<div id="app">
    <div v-if="plan === 'A'">
      プランA
    </div>
    <div v-else-if="plan === 'B'">
      プランB
    </div>
    <div v-else-if="plan === 'C'">
      プランC
    </div>
    <div v-else>
      非対応
    </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    plan: 'A'
  }
})
</script>

上記のコードの例では、planプロパティの値によって、プラン名の表示を切り替えています。