v-show

v-ifディレクティブとv-showディレクティブが消えた場合両者に違いがあります。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p v-if="ok">if</p>
<p v-show="ok">show</p>
<button @click="ok = !ok">ボタン</button>
</div>

new Vue({
  el: '#app',
   data: {
   ok: true
 }
})

v-ifの場合(検証画面で）

<!---->になっている

v-showの場合(検証画面で）

show

となっている。 v-showとtemplateタグの相性の悪さ - ```vuejs

テスト


vuejs
new Vue({
el: '#app',
data: {
ok: false

}
})
```

templateとの相性の悪さ

templateタグはok: falseを受けて消えるがv-showは元もとdisplay: noneで消えていて元は残っているのでテストだけ残ってしまう事になる。

2

if-elseにあたるものがない

3

表示コストが高い（表示しないものでもdisplay: noneで読み込んでいる）
＊v-ifも<!---->要素を消す作業をしているのでこちらも表示コストが高い。