【Vue】入門編(v-if、v-show)

こんにちは。
本日はVue.js入門編です。

概要

v-if、v-showともに表示・非表示を切り替える際に使用します。
どちらも使用方法は同じで
v-if="真偽" or v-show="真偽"
と記載します。

真の場合は、表示。
偽の場合は非表示となります。

v-ifとv-showの違いは、表示・非表示のやり方に違いがあります。
v-ifは、DOM要素を削除・追加することで表示・非表示を行います。
v-showの場合は、displayプロパティの値を変更することで表示・非表示を行います。

そのため、値の変更頻度が多い場合は、v-showを使い、
値の変更があまりされない場合はv-ifを使用するというような
使い分けを行う必要があります。

サンプルソース

dataに設定された値を計算して、指定の値以上の場合は
文字を表示、指定の値より少ない場合は非表示とするサンプルです。

v-if、v-showどちらも記載しています。

<div id="app">
<p v-if="isShow">
    30000円以上！
</p>
<p v-show="isShow">
    30000円以上！
</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price: 10000,
            num: 5
        },

        computed: {
            isShow: function() {
                return this.price * this.num >= 30000;
            }
        }
    });
</script>

以上です。