ループは、どのようなプログラミング言語でもテンプレートエンジンでも備えられていますが、もう1つ備えられているものがあります。分岐です。
Vue にも分岐を行うための仕組みがあります。それが v-if 属性です。
非常にシンプルです。v-if 属性に指定した値が true であれば、その要素がレンダリングされます。false であればレンダリングされません。
ここで注目したいのは、表示/非表示を切り替える処理を実装しているわけではなく、データによってリアクティブにそれが行われているということです。
上の例ではチェックボックスにチェックすることによってその下に div 要素が現れますが、チェックボックスの値を取得する処理を書くこともなく、
チェックボックスの値によって表示/非表示を切り替える処理を書くこともなく、この動きを実現しています。
if があるなら else も else-if もあります。使い方は… イメージ通りだと思います。
v-if に似たものとして、v-show という属性もあります。
動きは最初の例と同じように見えますが、見えないところに違いがあります。
v-if はその要素の存在そのもののありなしを制御するのに対し、v-show は、その要素を CSS で見えなくしているだけです。