v-html 渲染原始 HTML

最后更新：2026-10-22

v-html 把字符串当作 HTML 解析并插入元素内部，用于渲染富文本。

📝 语法

<div v-html="htmlContent"></div>

expression	HTML 字符串（不会自动转义）

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

页面显示「加粗」（粗体）与「斜体」（倾斜）——HTML 被解析渲染。

⚠️ 注意 只用 v-html 渲染可信内容：它不转义，用户输入直接渲染会造成 XSS 注入。

⚠️ 注意 绝不能在 v-html 内容里使用 v-bind 等指令：插入的模板不会被编译，指令无效。

💡 提示 简单文本用 v-text 或 {{ }} 即可，只有确实需要 HTML 结构时才用 v-html。

更多案例即将上线。

Q v-html 有安全风险吗？

A 有。它不转义内容，用户可控的数据经它渲染会造成 XSS。只对可信来源（自己写的内容、净化后的 HTML）使用。

Q 为什么 v-html 里的指令不生效？

A 插入的 HTML 不经过模板编译器，v-bind 等指令不会被识别。要动态模板请用渲染函数或组件。

Q 如何安全地渲染富文本？

A 先在后端或前端做 HTML 净化（如 DOMPurify），再交给 v-html；仅展示格式标签的场景优先考虑 v-text。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。