【vue】 v-ifで要素の表示条件を設定する

このifは、JavascriptではなくHTMLに書くifです。v-ifを使うことで、条件に応じて要素を出力するかどうかを制御できます。

使い方

v-if、v-else-if、v-else属性を使用します。普通のif文と同様に、v-else-ifとv-elseは必ずしも用意する必要はありません。

const app = Vue.createApp({
    data() {
        return {
            state: 10,
        }
    }
});
// mount略

<div id="app">
    <div v-if="state < 0">
        <p>stateは0未満</p>
    </div>
    <div v-else-if="state < 100">
        <p>stateは100未満</p>
    </div>
    <div v-else>
        <p>stateは100以上</p>
    </div>
</div>

ここで、v-elseの場合は属性の値は不要です。むしろ書くとエラーになります。

この例をJavascriptで表してみると

if (state < 0) {
    console.log("stateは0未満");
}
else if (state < 100) {
    console.log("stateは100未満");
}
else {
    console.log("stateは100以上");
}

と書いているのと同じ感覚です。

例えば、上の例のコードでstateが50だとすると、

<div>
    <p>stateは100未満</p>
</div>

だけが表示されます。条件を満たさなかった他の要素は、要素まるごとHTMLから消えます。

See the Pen vue1 if1 by Totori (@souki202) on CodePen.

また、v-if, v-else-if, v-elseは、要素が連続している必要があります。つまり、

<div v-if="state < 0">
    <p>stateは0未満</p>
</div>

<div>他の要素</div>

<div v-else-if="state < 100">
    <p>stateは100未満</p>
</div>
<div v-else>
    <p>stateは100以上</p>
</div>

のように挟んでしまうと動作しません。

また、条件式はJavascriptと同様に書くことができます。

<div v-if="state < 0 && state2 > 100 || !state3">
    <!-- ... -->
</div>

リアクティブ性を確認

値を書き換えれば, 表示する値もリアルタイムで変化します。

例えば、変数stateが10だったとして、

<div v-if="state < 0">
    <p>stateは0未満</p>
</div>
<div v-else-if="state < 100">
    <p>stateは100未満</p>
</div>
<div v-else>
    <p>stateは100以上</p>
</div>

の場合は、”stateは100未満”が表示されます。この状態でstateを150に書き換えると、表示は自動的に”stateは100以上”に切り替わります。

See the Pen vue1 if2 by Totori (@souki202) on CodePen.

まとめ

vueにおけるv-ifは、Javascriptのif文と似たような感覚で扱うことができます。