v-text 文本内容指令
最后更新：2026-10-22
v-text 文本内容指令
v-text 把表达式的值作为元素的文本内容，等价于双大括号插值，但会整体替换元素原有内容。
| 分组 | 指令 |
|---|---|
| 类型 | 指令 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<p v-text="msg"></p>
<p v-text="msg"></p>
<!-- 等价于 -->
<p>{{ msg }}</p>⚙️ 参数
| expression | 任意表达式，结果会转为字符串写入元素文本 |
|---|
返回值：指令，无返回值
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
两段都显示 Hello Vue!——v-text 与插值效果相同。💡 要点
ℹ️ 说明 v-text 会覆盖元素内部原有内容；只想局部插值用 {{ }} 更安全。
💡 提示 内容是纯文本，不会解析 HTML 标签（想插入 HTML 用 v-html）。
⚠️ 注意 v-text 与 {{ }} 同源：数据里含 HTML 时会被转义显示，可防 XSS。
🏷️ 相关指令
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q v-text 和 {{ }} 插值有什么区别？
A 效果相同，都输出纯文本；区别是 v-text 整体替换元素内容，{{ }} 只替换占位位置，混排文本时插值更灵活。
Q 数据里带 HTML 会渲染出来吗？
A 不会。v-text 与 {{ }} 都会转义，标签按字面显示——这正是防 XSS 的默认保护。
Q 什么时候该用它而不是插值？
A 当元素只承载一段完整文本、不希望与其他内容混排时用它，代码更短。
