v-text Text Content Directive
Last updated: 2026-10-22
v-text Text Content Directive
v-text sets the element's textContent from the expression. It equals mustache interpolation but replaces the whole content of the element.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<p v-text="msg"></p>
<p v-text="msg"></p>
<!-- equivalent to -->
<p>{{ msg }}</p>⚙️ Arguments
| expression | Any expression; the result is stringified into the element text |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
Both paragraphs show Hello Vue! — v-text behaves exactly like interpolation.💡 Key Points
ℹ️ Note v-text overwrites existing content; prefer {{ }} when you only need partial interpolation.
💡 Tip The value is plain text — HTML tags are not parsed (use v-html for that).
⚠️ Warning v-text shares {{ }}'s escaping, so HTML in data shows literally — good against XSS.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is v-text different from mustache interpolation?
A Identical output; v-text replaces the whole element content while {{ }} only fills its position, making interpolation more flexible in mixed text.
Q Does HTML in the data get rendered?
A No. Both v-text and {{ }} escape HTML; tags show literally — the built-in XSS protection.
Q When should I use it instead of interpolation?
A Use it when the element holds exactly one piece of text and nothing else, for shorter markup.
