【Vue.js】条件分岐のv-if、v-elseの使い方・書き方をサンプルコードで解説

2020年11月14日

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

v-ifで要素を存在させるかを分岐させる

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

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

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

v-ifとv-elseで条件分岐

v-ifを設定した要素の隣接要素にv-elseを設定することで、v-ifが偽だった場合の要素を存在させることが出来ます。

<div id="app-2">
    <div v-if="checkflg">チェックが入るとこの要素が存在します</div>
    <div v-else>チェックが入っていません</div>
    
    <input type="checkbox" v-model="checkflg" /> チェックを入れる
</div>

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

v-else-ifで条件分岐を増やす

v-elseはJavascriptのelse if文と同様に、v-else-ifと書いて分岐を増やすことも可能です。

<div v-if="no == 1">値は1です</div>
<div v-else-if="no == 2">値は2です</div>
<div v-else>値は3です</div>

v-ifとv-showとの違い

v-ifと近い設定として、v-showという設定が存在します。

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

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

この2つの違いは、

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

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

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

使い分ける方法として、v-ifがfalseの場合はレンダリング（描画処理）自体が行われません。

なので、頻繁に要素を切り替えない場合はv-ifが良いと思います。

逆に、頻繁に切り替えたい場合は、何度も再描画のコストがかかるので、styleで表示を切り替えているだけのv-showを使うと良いでしょう。

---

以上、条件分岐のv-if、v-elseの使い方・書き方をサンプルコードで解説、でした。