v-pre コンパイルのスキップ

最終更新：2026-10-22

v-pre はその要素と子要素のコンパイルをスキップします。{{ }} などのテンプレート構文をそのまま表示できるため、テンプレートコードを表示する際に役立ちます。

📝 構文

<span v-pre>{{ ここはコンパイルされません }}</span>
<code v-pre>{{ msg }}</code>

expression	式なし

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

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

出力：

The page shows 'Shown as-is: {{ msg }}' — braces stay literal.

ℹ️ 補足 チュートリアルやドキュメントでテンプレート構文を表示する際、補間が置き換えられるのを防ぐために使います。

💡 ヒント v-pre はすべての子孫ノードに適用されるため、コードブロック全体のコンテナに付けることができます。

⚠️ 注意 v-pre 要素内のディレクティブ（v-if など）も処理されません。

Q 典型的な用途は何ですか？

A チュートリアルやドキュメントでテンプレート構文そのものを表示し、{{ }} が置き換えられるのを避ける場合です。

Q 子要素のディレクティブは実行されますか？

A 実行されません。v-pre によりサブツリー全体がコンパイルをスキップします。

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

A v-pre はそもそもコンパイルしません（ソースの書き方をそのまま保持します）。v-once は 1 回コンパイルした後、更新しません。

Web-Tutorial 技術チーム

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