前端：v-html和v-text在使用上的区别

v-html 和 v-text 在 Vue 中的核心区别如下：

---

一、解析机制

1. ‌v-text ‌
   将数据作为纯文本渲染，‌不解析 HTML 标签 ‌。
   例如数据 '<strong>Hello</strong>' 会直接输出为字符串 <strong>Hello</strong>‌。
2. ‌v-html ‌
   将数据解析为 HTML 结构并渲染，‌支持解析标签 ‌。
   例如数据 '<strong>Hello</strong>' 会渲染为加粗的"Hello"‌。

---

二、内容覆盖方式

1. ‌v-text ‌
   完全替换元素内的‌所有内容 ‌（类似于 textContent 属性）‌。
   例如：

<div v-text="msg">原始内容</div>

1. 最终只显示 msg 的内容，原内容"原始内容"被覆盖。
2. ‌v-html ‌
   同样会覆盖元素内原有内容，但允许通过 HTML 标签实现更复杂的渲染效果‌。

---

三、安全性

1. ‌v-text ‌
   无安全风险，内容始终作为纯文本处理‌。
2. ‌v-html ‌
   可能引发 ‌XSS 攻击 ‌（跨站脚本攻击），需确保渲染内容来自可信来源。例如用户输入包含恶意脚本时，使用 v-html 可能导致安全问题‌。

---

四、使用场景

1. ‌v-text ‌
   适用于纯文本展示（如用户昵称、简单描述等）‌。
2. ‌v-html ‌
   适用于需要渲染富文本的场景（如后台返回的带格式内容、动态生成的 HTML 片段）‌。

---

总结对比表

‌特性‌	v-text	v-html
解析 HTML	❌	✔️
覆盖元素内容	✔️（完全替换）	✔️（完全替换）
安全性	高	低（需内容可信）
典型使用场景	简单文本展示	富文本或动态 HTML 渲染

---

通过合理选择指令，可平衡功能需求与安全性‌