【Vue.js】v-ifとv-showの違い【DOM上の有無】

Vue.jsのv-ifディレクティブとv-showディレクティブの共通点と差異について説明します。

Contents

v-ifとv-showの共通点
- 表示・非表示の切り替え
v-ifとv-showの違い
- DOMレベルで消えるか否か
- 公式

v-ifとv-showの共通点

表示・非表示の切り替え

v-ifとv-showの共通点としては、表示・非表示の切り替えを行う点。

true時にはブロックを表示し、false時にブロックを表示しない。

v-ifとv-showの違い

DOMレベルで消えるか否か

v-ifとv-showの違いは、DOMレベルで消えるか否か。

v-ifの場合、false時にdom上からも消える。
v-showの場合、false時にdom上から消えない。

もし頻繁に表示と非表示の切り替えを行うようなら、描画コストが重たくなるリスクが高くなる為、v-show推奨。

test.html

<html>
  <head>
    <title>Hello dice-record!!</title>
  </head>
  <body>
    <div id="application">
        <p>
          <!-- 必ず表示 -->
          <a v-bind:href="url" target="_blank">ダイス記</a>
        </p>
        <p v-if="show">
          <!-- showの値がtrue時のみ表示 -->
          <a v-bind:href="url" target="_blank">ダイス記 ※v-if</a>
        </p>
        <p v-show="show">
          <!-- showの値がtrue時のみ表示 -->
          <a v-bind:href="url" target="_blank">ダイス記 ※v-show</a>
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="test.js"></script>
  </body>
</html>

<html>

<head>

<title>Hello dice-record!!</title>

</head>

<body>

<p>

</p>

</p>

</p>

</div>

</body>

</html>

test.js

var app = new Vue({
    el: '#application',
    data: {
        url: 'https://dice-record.com/',
        // falseにすると2つ目のリンクが非表示
        show: false
    }
})