Vue.js

【Vue.js】v-ifとv-showの違いについて

生徒
生徒
v-ifv-showってどっちも表示・非表示ができるんじゃないかな?どう使い分けたらいいのかな?

このような疑問の解決記事です。

 

Vue.jsで実装していると、v-ifv-showで要素を表示・非表示を制御する場合、どちらを使えばいいのか分からなくなることがあります。

そこで本記事では、両者の違いについて解説していきます。

 

v-ifv-show 両者の違い

結論からお伝えすると、DOM要素を非表示にした場合、下記違いがあります。

  • v-ifは、存在レベルで非表示
  • v-showは、存在するが非表示

これだけだと分かりづらいと思うので、ブラウザ挙動とコードを見ていきましょう。

 

ブラウザ挙動とコード

以下のような表示になっており、両要素ともdivタグが表示されています。
(クリックで拡大画像になります)

 

実際のコードはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>v-ifとv-showの違い</title>
</head>
<body>
    <div id="app">
        <div v-if="type === 'A'">
            v-ifのDOM
        </div>
        <div v-show="isShow">
            v-showのDOM
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    type: 'A',
                    isShow: true
                }
            }

        })
    </script>
</body>
</html>

 

 

Vueインスタンスの値を変更した結果

両者を非表示状態にするために、Vueインスタンスの値を変更します。

<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                type: 'AA', // 'A' → 'AA'に変更
                isShow: false // true → falseに変更
            }
        }

    })
</script>

 

すると以下のようになります。

よく見ると、v-ifの要素はコメントアウト、v-showの要素はdisplay: none;になっていることが分かります。

 

まとめるとこんな感じです。

DOM 監視プロパティ
(watch)
v-if
  • 存在が消える
    (コメントアウト化される)
追跡不可
v-show
  • 存在は残る
    ( = display: none; で非表示)
追跡可

 

以上がv-ifとv-showの違いです。

 

まとめ

本記事では、「v-ifとv-showの違いについて【Vue.js】」について、以下のことをお伝えしました。

  • v-ifとv-show 両者の違い
  • ブラウザ挙動とコード
  • Vueインスタンスの値を変更した結果
ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。