v-text テキストコンテンツディレクティブ
最終更新：2026-10-22
v-text テキストコンテンツディレクティブ
v-text は式の値を要素のテキストコンテンツ（textContent）として設定します。マスタッシュ補間と同等ですが、要素の内容全体を置き換えます。
| グループ | ディレクティブ |
|---|---|
| 種類 | ディレクティブ |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<p v-text="msg"></p>
<p v-text="msg"></p>
<!-- 等価 -->
<p>{{ msg }}</p>⚙️ 引数
| expression | 任意の式。結果は文字列化されて要素のテキストに書き込まれます |
|---|
戻り値：ディレクティブ。戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Both paragraphs show Hello Vue! — v-text behaves exactly like interpolation.💡 ポイント
ℹ️ 補足 v-text は既存の内容を上書きします。部分的な補間だけが必要な場合は {{ }} を使う方が安全です。
💡 ヒント 内容はプレーンテキストであり、HTML タグは解釈されません（HTML を挿入したい場合は v-html を使用します）。
⚠️ 注意 v-text は {{ }} と同じエスケープ機構を持つため、データ内の HTML はそのまま表示されます。XSS 対策として有効です。
🏷️ 関連ディレクティブ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q v-text とマスタッシュ補間（{{ }}）の違いは何ですか？
A 出力結果は同じです。v-text は要素の内容全体を置き換えるのに対し、{{ }} はプレースホルダーの位置だけを置き換えます。テキストが混在する場合は補間の方が柔軟です。
Q データに含まれる HTML はレンダリングされますか？
A いいえ。v-text も {{ }} も HTML をエスケープするため、タグはそのまま表示されます。これが XSS 防止のデフォルトの保護です。
Q いつ補間の代わりに v-text を使うべきですか？
A 要素が 1 つの完全なテキストだけを持ち、他の内容と混在させたくない場合に使うと、マークアップが短くなります。
