在 Vue 的指令系统中，v-text和v-html都用于将数据渲染到 DOM 中，但二者的核心功能与使用场景却截然不同。如果混淆它们的用法，不仅可能导致页面渲染异常，甚至会引发安全风险。本文将深入解析v-text与v-html的区别、使用场景及注意事项，帮助你在实际开发中做出正确选择。
一、v-text：纯文本渲染的 "守护者"
v-text指令的作用是将数据以纯文本的形式渲染到元素中 ，它会覆盖元素内原有的所有内容，且不会解析任何 HTML 标签。可以将其理解为 "更严谨的插值表达式{``{}}"。
基本用法
<div id="app">
<p v-text="message"></p>
<p>{{ message }}</p> <!-- 与v-text效果一致 -->
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello <span style="color: red;">Vue</span>'
}
});
</script>渲染结果：
<p>Hello <span style="color: red;">Vue</span></p>
<p>Hello <span style="color: red;">Vue</span></p>可以看到，即使数据中包含 HTML 标签，v-text也会将其作为普通字符串渲染，不会解析执行。
特点与优势
- 纯文本安全渲染：杜绝 HTML 注入风险，适合展示用户输入的内容（如评论、用户名）。
- 覆盖原有内容 ：元素内的任何子节点都会被
v-text的内容替换，避免混合渲染导致的混乱。 - 与插值表达式的区别 ：
v-text是完整替换元素内容，而{``{}}可嵌入元素内的其他文本中（如<p>欢迎：{``{ name }}</p>）。
二、v-html：HTML 解析的 "执行者"
v-html指令的作用是将数据作为 HTML 解析并渲染到元素中，它会覆盖元素内原有内容，且能执行 HTML 标签、CSS 样式甚至 JavaScript 脚本（存在安全风险）。
基本用法
<div id="app">
<div v-html="content"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
content: '<h2 style="color: blue;">Vue渲染HTML</h2><p>这是解析后的HTML内容</p>'
}
});
</script>渲染结果：
<div>
<h2 style="color: blue;">Vue渲染HTML</h2>
<p>这是解析后的HTML内容</p>
</div>此时，数据中的 HTML 标签被正常解析，样式也生效了。
特点与风险
1.HTML 解析能力：支持渲染包含 HTML 结构的数据，适合展示富文本内容（如后台编辑的文章、带格式的公告）。
2.安全隐患 ：若渲染的内容包含用户输入的 HTML（如<script>标签、恶意链接），可能引发 XSS 攻击（跨站脚本攻击），窃取用户信息或篡改页面。
3.无法作用于组件 ：v-html只能解析普通 HTML 元素，不能用于 Vue 组件的渲染。
三、v-text 与 v-html 核心区别对比
| 特性 | v-text | v-html |
|---|---|---|
| 内容处理方式 | 纯文本渲染，不解析 HTML | 解析 HTML 标签并渲染 |
| 安全风险 | 无，适合用户输入内容 | 有 XSS 风险，需谨慎使用 |
| 适用场景 | 展示普通文本（用户名、评论） | 展示富文本（文章、格式化内容） |
| 原有内容处理 | 覆盖元素内所有内容 | 覆盖元素内所有内容 |
| 与插值表达式关系 | 等价于<p>{``{ msg }}</p> |
无直接等价插值表达式 |
四、使用场景与最佳实践
1. 优先使用 v-text 的场景
- 展示用户输入的内容（如评论区、个人资料）：防止用户恶意输入 HTML 标签破坏页面或发起攻击。
- 渲染普通文本数据（如标题、描述）：保证内容的纯文本展示，避免意外解析。
2. 谨慎使用 v-html 的场景
- 展示后台可控的富文本内容（如管理员编辑的文章、系统公告）：确保内容来源安全，无恶意代码。
- 需渲染带格式的内容（如包含
<strong>、<em>等标签的文本）：避免手动拼接 HTML 的繁琐。
3. 安全使用 v-html 的建议
-
过滤危险标签 ：使用第三方库（如
DOMPurify）过滤v-html内容中的<script>、<iframe>等危险标签。javascript
运行
import DOMPurify from 'dompurify'; new Vue({ el: '#app', data: { unsafeContent: '<script>alert("XSS攻击")</script><p>安全内容</p>' }, computed: { safeContent() { return DOMPurify.sanitize(this.unsafeContent); } } }); -
避免渲染用户输入的 HTML ：除非必要，否则绝不直接将用户输入的内容通过
v-html渲染。
五、总结
v-text和v-html看似功能相似，实则定位完全不同：
- v-text是 "安全卫士"，专注于纯文本渲染，杜绝 HTML 注入风险；
- v-html是 "HTML 解析器"，支持富文本渲染，但需警惕安全问题。
在实际开发中，应遵循 "能使用v-text就不用v-html" 的原则，仅在确需渲染 HTML 且内容来源安全时使用v-html，并做好安全过滤。正确选择二者，既能保证页面渲染效果，又能守护应用的安全性。