【Vue.js】表示・非表示を切り替えるv-showの使い方をサンプルコードで解説

2020年11月21日

手っ取り早くこのページのサンプルコードを検証するには、下記のvueライブラリを事前に読み込んでおいてください。

v-showで要素の表示・非表示を切り替える

Vueは、v-show=”条件”が真の場合に要素を表示させる条件分岐を行うことが出来ます。

<div id="app-1">
    <div v-show="checkflg">チェックが入るとこの要素が表示されます</div>
    
    <input type="checkbox" v-model="checkflg" /> チェックを入れる
</div>

<script>
new Vue({
    el: '#app-1',
    data: {
        checkflg : false,
    }
});
</script>

v-showはv-else出来ない

v-showは隣接要素にv-elseで書いても、v-ifのように偽の条件を表示させることは出来ません。
あまり起こり得ないケースですが、どうしてもelseの処理を使いたい場合は否定演算子などで代用しましょう。

<div id="app-2">
    <div v-show="checkflg">チェックが入るとこの要素が表示されます</div>
    <div v-show="!checkflg">チェックが入っていませんので表示されません</div>
    
    <input type="checkbox" v-model="checkflg" /> チェックを入れる
</div>

<script>
new Vue({
    el: '#app-2',
    data: {
        checkflg : false,
    }
});
</script>

v-ifとv-showとの違い

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

• v-ifは要素の存在を切り替える
• v-showは要素の表示を切り替える（どちらにしても要素自体は存在している）

と考えると分かりやすいでしょう。

<!-- <p>fuga</p> --> <!-- ←v-if="false"の場合 -->
    
<p style="display: none;">fuga</p> <!-- ←v-show="false"の場合 -->

以上、表示・非表示を切り替えるv-showの使い方をサンプルコードで解説、でした。