v-html 和 v-text 在 Vue 中的核心区别如下:
一、解析机制
- v-text
将数据作为纯文本渲染,不解析 HTML 标签 。
例如数据'<strong>Hello</strong>'
会直接输出为字符串<strong>Hello</strong>
。 - v-html
将数据解析为 HTML 结构并渲染,支持解析标签 。
例如数据'<strong>Hello</strong>'
会渲染为加粗的"Hello"。
二、内容覆盖方式
- v-text
完全替换元素内的所有内容 (类似于textContent
属性)。
例如:
html
<div v-text="msg">原始内容</div>
- 最终只显示
msg
的内容,原内容"原始内容"被覆盖。 - v-html
同样会覆盖元素内原有内容,但允许通过 HTML 标签实现更复杂的渲染效果。
三、安全性
- v-text
无安全风险,内容始终作为纯文本处理。 - v-html
可能引发 XSS 攻击 (跨站脚本攻击),需确保渲染内容来自可信来源。例如用户输入包含恶意脚本时,使用v-html
可能导致安全问题。
四、使用场景
- v-text
适用于纯文本展示(如用户昵称、简单描述等)。 - v-html
适用于需要渲染富文本的场景(如后台返回的带格式内容、动态生成的 HTML 片段)。
总结对比表
特性 | v-text | v-html |
---|---|---|
解析 HTML | ❌ | ✔️ |
覆盖元素内容 | ✔️(完全替换) | ✔️(完全替换) |
安全性 | 高 | 低(需内容可信) |
典型使用场景 | 简单文本展示 | 富文本或动态 HTML 渲染 |
通过合理选择指令,可平衡功能需求与安全性