[Vue] v-if VS v-show かるくまとめる

２つに共通すること

どちらも条件付きレンダリングをされるということ。
その条件に当てはまるときのみ表示されます。

<div id="app">
  <div v-if="error">
    // errorがtrueのときのみ表示される
  </div>
</div>

<div id="app">
  <div v-show="error">
    // v-if同様、errorがtrueのときのみ表示される
  </div>
</div>

ちがい

v-ifはDOMごと操作

v-ifは条件に当てはまらないとき、HTMLから要素ごと消去されます。

v-showはcssで操作

一方で、v-showは条件に当てはまらないとき、**CSSスタイルでdisplay:noneを当てて見えなくさせているだけ*です。HTML要素としては存在しつづけています。

v-showはelse表示なし

v-ifは、v-elseが存在し、条件に当てはまらないときに代わりに表示するものを指定できます。
v-showにはこれがありません。

使い分け

v-ifの使い時

-切り替え頻度が少ないとき
→v-ifは表示し直すたびに要素が作り直されるため

-条件に合わないときに別に表示したいものがあるとき
→v-elseがあるため

v-showの使い時

-切り替え頻度が高い時
→v-showはDOMには存在しつづけるため

-条件に合わないときに特別表示したいものがないとき
→v-elseがないため