v-text 安全渲染纯文本并自动转义HTML，适合展示用户输入等原始内容；v-html 直接解析HTML不转义，仅限可信富文本且需服务端过滤或DOMPurify净化，否则易致XSS攻击。
v-text 和 v-html 都用于在 Vue 模板中插入动态内容，但作用方式和安全风险完全不同。
v-text：纯文本渲染，自动转义 HTML
它把绑定的值当作普通字符串处理，会将其中的 HTML 标签字符（如 <、>、&）自动转义为对应实体，确保浏览器只显示文本，不解析为标签。
- 适合展示用户输入、API 返回的原始文本内容，比如评论、标题、描述等
- 即使数据里包含
<script>alert(1)</script>，页面也只会显示这一串字符，不会执行 - 写法简洁：
<div v-text="message"></div>等价于<div>{{ message }}</div>
v-html：原生 HTML 渲染，不转义直接插入
它把绑定的值当作真正的 HTML 片段解析并渲染，浏览器会执行其中的标签、样式甚至脚本。
- 仅适用于你完全信任的数据来源，例如富文本编辑器生成的内容（且已做过服务端清洗）
- 若直接绑定用户提交的未过滤内容，可能引发 XSS 攻击——比如插入恶意 script 标签窃取 Cookie
- 写法：
<div v-html="htmlContent"></div>，注意不能用在<input>或自闭合标签上
安全性关键提醒
Vue 不会对 v-html 做任何防护，是否安全全靠开发者把控。
立即学习“前端免费学习笔记（深入）”；
- 永远不要把用户可控字段（如 URL 参数、表单输入、评论内容）直接传给
v-html - 如需渲染富文本，应在后端用白名单机制过滤 HTML（如只允许
<p>、<strong>、<a>及其部分属性），再传给前端 - 前端也可借助库如
DOMPurify在渲染前做二次净化：v-html="DOMPurify.sanitize(rawHtml)"
简单对比总结
v-text 安全但无格式；v-html 有表现力但高危。 大多数场景下优先用 {{ }} 或 v-text；只有确认内容可信且必须支持 HTML 时，才谨慎启用 v-html。
