v-if/v-showの違い

どちらも条件式が成立する際に表示、条件式が不成立の場合に非表示になるが、違いは非表示の際にDOMにデータが残るか、またはDOMから完全に削除されるか

v-if

・条件式が成立する際にDOMに出力、条件式が不成立の場合はDOMに出力されず完全削除される
・v-if/v-else-if/v-elseで条件分岐が可能（記述方法はバニラJavaScriptのif文頭に「v-」をつけた形）
・再レンダリング毎にDOMノードヘの追加、削除が発生する。そのため値の変化が少ない場合や、DOMの節約時に使用することが適切。
・v-forよりもv-ifの方が優先度が高い（Vue3より変更）

Vue.js公式ドキュメント＞移行ガイドを参照

v-show

・常時レンダリングされ、条件式の成立有無に関わらずDOMに残り続ける。
・成立の場合は出力、不成立の場合はCSSの「display:none;」と同じ状態になる。（DOMにはデータが残っているため、再表示の際高速な処理が可能）
・データの変化が多い場合はv-showを使う方がUX向上

条件付きレンダリング | Vue.js