Vue3 v-ifを用いた条件分岐

参考サイト

こちらの公式サイトを参考にしました。
jp.vuejs.org

基本的な使い方

変数によって表示するタグを変えられるようにしたいときに使います。
v-if, v-else-if, v-elseの使い分けは次の通りです。

v-if	指定した条件を満たすときに表示
v-if-else	v-ifで示した条件を満たさず、この文で指定した条件を満たすとき
v-else	v-if, v-if-elseで示した条件をすべて満たさないとき

HTMLで書くときは次のようになります。

<tag v-if = "条件1'">条件1を満たすときに表示</tag>
<tag v-if = "条件2'">条件2を満たすときに表示</tag>
:
:
<tag v-else-if = "条件3">上までの条件を満たさず、条件3を満たすときに表示</tag>
<tag v-else-if = "条件4">上までの条件を満たさず、条件4を満たすときに表示</tag>
:
:
<tag v-else>いずれの条件も満たさないときの表示内容</tag>

例1：bool型でv-ifとv-elseを切り替える

• appdata内のenabledの真偽により表示を切り替えるコードを作成しました。
• 今回はenabled = falseの例です。

See the Pen
if-else by purple_hat (@purple_hat)
on CodePen.

例2：ボタンにより表示内容を変化

• ボタンを押すと変数seasonを書き換え、該当する季節の英語を表示します。
• 条件式でイコールを使うときは、「===」と3つ重ねます。

See the Pen
if-elseif-else by purple_hat (@purple_hat)
on CodePen.