v-if 条件付きレンダリングディレクティブ

最終更新：2026-10-22

v-if は式が真（truthy）のときだけブロックをレンダリングします。偽のとき要素は破棄されて DOM から取り除かれ、再び真になると再作成されます。

📝 構文

<div v-if="condition">...</div>
<div v-else-if="anotherCondition">...</div>
<div v-else>...</div>

expression	真偽値を返す任意の式（テンプレートに直接記述し、波括弧は不要）

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

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

出力：

The page shows 'Now you see me'. Clicking the button removes the paragraph from the DOM.

💡 ヒント 切り替えのコストが高い（DOM の破棄/再作成）ため、頻繁に表示を切り替える場合は v-show の方が効率的です。

⚠️ 注意 v-if と v-for を同じ要素に書かないでください。v-if の方が優先度が高く、ループ変数にアクセスできません。ネストした template を使ってください。

ℹ️ 補足 v-else / v-else-if は v-if 要素の直後に置く必要があります。間に他の要素を挟めません。

Q v-if と v-show の違いは何ですか？

A v-if は要素を実際に破棄/再作成します（遅延レンダリングで、初期条件が偽なら何もレンダリングしません）。v-show は常に要素をレンダリングし、CSS の display だけを切り替えます。

Q 条件が偽のとき、開発者ツールで要素が見つからないのはなぜですか？

A これがまさに v-if の動作です。要素は非表示ではなく、DOM から取り除かれて破棄されています。

Q v-if は v-for と組み合わせて使えますか？

A 同じ要素での併用はおすすめしません。v-if を外側の <template> に置き、v-for を内側の要素に残してください。

Web-Tutorial 技術チーム

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