v-ifとv-show ~条件によって表示を切り替える~

バインドした値がtrueの時のみ要素を表示させる。

v-if

• 切り替えのコストが大きい。

<p v-if="ok">
<p v-else-if="maybe-ok">
<p v-else>

data: {
    ok: true
    maybe-ok: false
}

v-show

• v-ifと同じ挙動だが、頻繁に何かを切り替える処理に適する
• templateタグ内で使えない
• 初期描画のコストが大きい

v-ifは要素ごと消すのに対し、v-showはdisplay: none;を加えることによって消す。