Vue v-show

Volardev 編集部 April 28, 2026

1. 表示状態の条件制御 (Conditional Visibility)

v-show ディレクティブを使用して、要素の表示（Visible）と非表示を切り替える方法を学びましょう。

v-show は、HTML 属性に直接条件を記述できるため、非常に簡単に使用できます。このディレクティブは、条件が false の場合に CSS の display プロパティの値を none に設定することで、要素を隠します。

HTML 属性として v-show を記述した後は、そのタグを表示するかどうかを決定する 条件（Condition） を指定する必要があります。

2. 構文 (Syntax)

<div v-show="showDiv">この div タグは非表示にできます</div>

上記のコードにおいて、showDiv はプロパティ値として true または false を持つ ブーリアン（Boolean） 型の Vue データプロパティを表します。showDiv が true であれば div タグが表示され、false であれば表示されません。

3. 使用例

showDiv プロパティが true に設定されている場合のみ <div> 要素を表示する例です。

<div id="app">
  <div v-show="showDiv">この div タグは非表示にできます</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        // 表示状態を管理する変数
        showDiv: true
      }
    }
  })
  app.mount('#app')
</script>

4. v-show と v-if の比較

v-show と v-if の決定的な違いは、レンダリング（Rendering） の仕組みにあります。v-if は条件に応じて要素をその都度作成（マウント）または削除（アンマウント）しますが、v-show の場合は要素は常に作成された状態で維持され、可視性（Visibility） のみが変更されます。

そのため、オブジェクトの表示状態を頻繁に切り替える（トグルする）場合は、v-show を使用するのが最適です。ブラウザにとって負荷が少なく、応答速度の向上と優れた ユーザーエクスペリエンス（UX） につながります。

一方で、v-if を選択する主な理由は、v-else-if や v-else と組み合わせて複雑な条件分岐を構成できる点にあります。

5. 動作比較の例

以下の例では、同じ Vue プロパティに基づいて、2つの異なる <div> 要素に対して v-show と v-if を個別に適用しています。
ブラウザのデベロッパーツールでコードを インスペクト（検証） すると、showDiv が false のとき、v-show は要素を保持したまま CSS の display: none を付与しているのに対し、v-if は要素自体を完全に破棄（Destroy）していることが確認できます。

<div id="app">
  <div v-show="showDiv">v-show を使用した div タグ</div>
  
  <div v-if="showDiv">v-if を使用した div タグ</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        showDiv: true
      }
    }
  })
  app.mount('#app')
</script>