v-html 生の HTML のレンダリング

最終更新：2026-10-22

v-html は文字列を HTML として解析して要素に挿入します。リッチテキストの表示に使われます。

📝 構文

<div v-html="htmlContent"></div>

expression	HTML 文字列（自動的にエスケープされません）

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

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

出力：

The page shows bold and italic text — the HTML string is parsed and rendered.

⚠️ 注意 v-html は信頼できるコンテンツにのみ使用してください。エスケープされないため、ユーザー入力をそのまま表示すると XSS 注入につながります。

⚠️ 注意 v-html の内容に v-bind などのディレクティブを含めることは絶対にできません。挿入されたテンプレートはコンパイルされず、ディレクティブは機能しません。

💡 ヒント プレーンテキストには v-text か {{ }} で十分です。本当に HTML 構造が必要な場合のみ v-html を使ってください。

Q v-html にはセキュリティリスクがありますか？

A はい。エスケープされないため、ユーザーが制御できるデータを表示すると XSS が発生します。信頼できるソース（自分で書いた内容、サニタイズ済みの HTML）にのみ使用してください。

Q v-html の中のディレクティブが機能しないのはなぜですか？

A 挿入された HTML はテンプレートコンパイラを経由しないため、v-bind などのディレクティブは認識されません。動的なテンプレートにはレンダー関数やコンポーネントを使ってください。

Q リッチテキストを安全に表示するには？

A v-html に渡す前に HTML をサニタイズします（例：DOMPurify）。書式表示が不要な場合は v-text を優先してください。

Web-Tutorial 技術チーム

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