v-text 将数据作为纯文本渲染并自动转义，防 xss；v-html 直接解析执行 html，存在安全风险，仅适用于绝对可信的富文本内容。
v-text 和 v-html 看似都是“往页面塞内容”，但底层逻辑、渲染行为和安全后果完全不同。新手用错一个，就可能让 XSS 攻击钻空子。
v-text：只认文字，不认标签
它把绑定的数据当纯字符串处理，等价于原生 DOM 的 textContent。哪怕你传的是 '<em>加粗</em>文本'，页面上也只会原样显示这串字符，不会加粗，不会解析，更不会执行。
- 自动转义所有 HTML 特殊字符（如 、&），天然防 XSS
- 会清空元素内原有所有内容，包括子节点、注释、空格
- 适合展示用户名、评论摘要、状态提示等纯文本字段
- 比双大括号 {{ }} 更稳定——不会在 Vue 加载前闪现 {{ message }}
v-html：真·解析 HTML，风险与能力并存
它把数据当 HTML 代码来执行，等价于原生 DOM 的 innerHTML。传入 '<h3 style="color:red">危险操作</h3>'，页面就会渲染出红色标题，样式生效、结构成立、脚本可运行。
- 不转义任何内容，
<script>alert(1)</script>会被执行 - 同样覆盖元素全部子内容，不留余地
- 只应出现在内容绝对可信的场景，比如 CMS 后台返回的富文本公告
- 绝不能用于用户可编辑、可提交、可篡改的字段（如评论框、个人简介）
新手防范 XSS 的关键操作
不是“少用 v-html”，而是“用对地方 + 做好兜底”：
- 默认优先选 v-text 或 {{ }}，除非明确需要保留 HTML 格式
- 必须用 v-html 时，前端做简单过滤（如仅允许
等白名单标签） - 后端返回富文本前，务必做服务端净化（推荐使用 DOMPurify 或类似库）
- 开发阶段开启 Vue 的生产模式（production），它会关闭部分调试警告，但不会掩盖 XSS 漏洞——别依赖这个“掩耳盗铃”
一句话总结选择逻辑
想显示“一段话”，用 v-text；想显示“一段带格式的网页片段”，且你 100% 确信它没毒，才用 v-html。不确定？那就先过滤，再渲染，永远把用户输入当“潜在攻击源”对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
