２つに共通すること

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


<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は条件に当てはまらないとき、HTMLから要素ごと消去されます。

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

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

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

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

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

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