![見出し画像](https://assets.st-note.com/production/uploads/images/123636334/rectangle_large_type_2_fb2db220d0fc13549a13c1432c452690.png?width=1200)
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より変更)
![](https://assets.st-note.com/img/1701728487178-GMsWLTBDzP.png?width=1200)
v-show
・常時レンダリングされ、条件式の成立有無に関わらずDOMに残り続ける。
・成立の場合は出力、不成立の場合はCSSの「display:none;」と同じ状態になる。(DOMにはデータが残っているため、再表示の際高速な処理が可能)
・データの変化が多い場合はv-showを使う方がUX向上
この記事が気に入ったらサポートをしてみませんか?