v-show CSS による表示切り替え

最終更新：2026-10-22

v-show は式の真偽に応じて要素の display スタイルを切り替えます。要素は常に DOM に残り、表示・非表示だけが変わります。

📝 構文

<p v-show="isVisible">今、私が見えています</p>

expression	任意の真偽値を返す式

戻り値：ディレクティブ。戻り値なし

以下のコードを編集して結果を確認しましょう：

出力：

Toggling hides/shows the text while the element remains in the DOM with display: none.

💡 ヒント 頻繁に切り替える場合は v-show の方が効率的です。CSS を変えるだけで、DOM の破棄・再構築のオーバーヘッドがありません。

ℹ️ 補足 初期条件が偽でも要素はレンダリングされます（DOM に残る）ため、初期コストが高くなります。

⚠️ 注意 v-show は v-else をサポートしません。スタイルの切り替えであり、条件分岐ディレクティブではありません。

Q v-show と v-if はどちらを選ぶべきですか？

A 切り替え頻度が高い → v-show（CSS のみ変更）。条件がほとんど変わらない・遅延レンダリングが必要 → v-if。

Q v-show で隠れた要素は開発者ツールで見えますか？

A 見えます。要素は display が none の状態で常に DOM に残っています。

Q v-show は v-else と組み合わせられますか？

A いいえ。v-show は分岐ディレクティブではありません。排他的な表示には v-if / v-else を使ってください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。