v-text 安全输出纯文本，自动转义 html 字符、防 xss；v-html 解析执行 html，不转义、有 xss 风险，仅适用于可信富文本。
v-text 和 v-html 表面都是往标签里塞内容，但本质完全不同：一个只认字，一个真跑 HTML。用错就可能让恶意脚本直接执行。
v-text：安全输出纯文本
它把绑定的数据当普通字符串处理，等价于原生 DOM 的 textContent。哪怕你传的是 <script>alert(1)</script>，页面上就真的只显示这串字符，不解析、不执行、不渲染成按钮或弹窗。
- 自动转义所有 HTML 特殊字符（如
→ <code><），天然防 XSS - 会清空元素内原有全部内容——包括子节点、空格、注释
- 比双大括号
{{ }}更稳定，不会在 Vue 初始化前闪出未编译的{{ message }} - 适合用户名、状态提示、评论摘要等无需格式的字段
v-html：解析并执行 HTML
它把数据当真实 HTML 代码来处理，等价于原生 DOM 的 innerHTML。传入 <h3 style="color:red">公告</h3>，就会渲染出红色标题；传入 <img src="x" onerror="alert(1)">，脚本也会触发。
- 完全不转义，任何标签、属性、事件处理器都会被解析执行
- 同样覆盖整个元素内容，不留余地
- 只适用于后端 CMS 返回的、经过严格净化的富文本（比如文章正文、系统公告）
- 绝不能用于用户可输入的内容（如个人简介、评论框、搜索关键词）
新手防 XSS 的关键操作
不是“少用 v-html”，而是“该用时更谨慎 + 有兜底”：
- 默认选 v-text 或
{{ }}；只有明确需要保留样式/结构，且确认内容 100% 可信，才考虑 v-html - 必须用 v-html 时，前端做简单白名单过滤（例如只允许
<p><strong><em></em></strong></p>等基础标签） - 后端返回富文本前，必须服务端净化（推荐使用 DOMPurify 或类似库）
- 开发阶段别依赖 Vue 生产模式“隐藏警告”——它不拦 XSS，只是关掉控制台提示
一句话判断逻辑
想显示“一段话”，用 v-text；想显示“一段带格式的网页片段”，且你确信它没毒，才用 v-html。不确定？先过滤，再渲染，永远把用户输入当潜在攻击源对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
