【Vue.js】Vue.jsメモ（v-if, v-show:条件分岐） - 怠惰系エンジニアのメモ帳

今回はv-if、v-showについて。
どちらも条件分岐に使用するディレクティブで、式の結果が true の場合のみレンダリングを行う。

基本構文

v-if、v-show に続けて、条件式を記載します。
今回は、プロパティ isEnable が true の場合のみ divタグを表示するようにします。

<div id="app">
    <div v-if="isEnable">v-if</div>
    <div v-show="isEnable">v-show</div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        isEnable: true
    }
})

上記コードのレンダリング結果は以下の通り。

<div id="app">
    <div>v-if</div>
    <div>v-show</div>
</div>

ここまでは v-if も v-show も特に違いが無いように見える。
次に、isEnable を false に変更して結果を見てみる。

var app = new Vue({
    el: '#app',
    data: {
        isEnable: false
    }
})

レンダリング結果は以下の通り。

<div id="app">
    <!---->
    <div style="display: none;">v-show</div>
</div>

v-if を使用した div の方は、コメントアウトされた。
一方 v-show を使用した div の方は、style="display: none;"が付加された。

見て分かる通り、v-if を利用すると条件式がfalseの場合に、自身の要素はDOM上から削除されてしまう。
v-showの方は、スタイルを適用して画面に表示されていないだけで、DOM上には存在している。

v-if と v-show の使い分けについては