v-ifとv-showの違いとは ~条件付きレンダリング~

v-show

<タグ名 v-show="条件式">trueなら表示</タグ名>

v-ifとv-showの比較

表示、非表示の動作が異なる。

• v-ifはDOMレベルで要素が削除され、消えた部分はコメント化される。
• v-showはDOMから要素は削除されず、dispay: none;が設定される。
  →DOMへの要素の生成と削除は負担が大きいため、上手く使い分ける必要があるみたい。

v-if

切り替えコストが高い(DOM要素も表示、非表示させるから）
初期描画コストが低い
内部の状態は初期化される

v-show

切り替えコストが低い（CSSレベル）
初期描画コストが高い（必ず描画される）
内部の状態は保持される

v-ifとv-showの書き方

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div v-if="true">v-if="true"のとき</div>
  <div v-if="false">v-if="false"のとき</div>
  <div v-show="true">v-show="true"のとき</div>
  <div v-show="false">v-show="false"のとき</div>
</div>
<script>
  new Vue({ el: '#app' })
  　// 実際に描画されるHTML
   const el = document.getElementById('app')
   console.log(el.innerHTML.replace(/> </g, '>\n<'))
</script>

false時のコンソールの内容が異なる

# 検証ツールなど
<div>v-if="true"のとき</div>
<!---->

<div>v-show="true"のとき</div>
<div style="display: none;">v-show="false"のとき</div>