Vue如何渲染HTML内容_模板与指令使用解析【指南】

应使用v-html指令渲染可信HTML内容，或结合DOMPurify净化后注入；也可用render函数构造VNode规避XSS，或通过自定义指令封装校验逻辑。

如果您在Vue应用中需要将字符串作为HTML内容动态插入到页面中，而不是以纯文本形式显示，则必须使用特定的模板语法和指令来实现安全且正确的渲染。以下是实现此目标的具体方法：

一、使用v-html指令渲染HTML内容

v-html指令用于将数据作为HTML内容直接插入元素内部，它会替换元素的innerHTML。该指令会忽略数据中的HTML转义字符，并执行原生HTML解析，因此需确保内容可信，避免XSS风险。

1、在Vue实例或组件的data选项中定义包含HTML标签的字符串，例如：message: '红色文字 加粗内容'。

2、在模板中绑定该数据到元素上，使用v-html指令：

立即学习“前端免费学习笔记（深入）”；

3、Vue将自动解析message字符串中的HTML标签并渲染为对应DOM结构，而非显示原始标签文本。

二、使用插值语法配合DOMPurify进行安全渲染

标准双大括号插值{{ }}默认对HTML内容进行转义，无法直接渲染标签。若需保留插值语法风格同时支持HTML输出，可结合第三方库DOMPurify对HTML字符串进行净化后再注入，规避恶意脚本执行风险。

1、通过npm安装DOMPurify：npm install dompurify。

2、在组件中导入并使用：在computed属性中调用DOMPurify.sanitize()处理原始HTML字符串，例如：safeHtml() { return DOMPurify.sanitize(this.rawHtml); }。

3、在模板中仍使用v-html绑定计算属性结果：

标签： vue html node npm render函数 字符串解析 red