Vue模板与指令渲染全解析

一分耕耘，一分收获！既然都打开这篇《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绑定计算属性结果：

三、通过render函数手动创建VNode渲染HTML结构

render函数提供比模板更底层的控制能力，允许开发者完全绕过HTML字符串解析过程，直接构造虚拟节点树。适用于需要精细控制DOM生成逻辑、或动态生成复杂嵌套结构的场景。

1、在组件选项中定义render函数，不使用template字段。

2、使用Vue提供的h函数创建VNode，例如：h('div', [h('span', { style: { color: 'blue' } }, '蓝色文字'), h('em', '斜体内容')])。

3、返回该VNode结构，Vue将据此生成真实DOM，所有内容均经由框架内部机制构建，天然免疫XSS攻击。

四、使用自定义指令封装v-html行为并添加校验逻辑

为统一管理HTML渲染入口、增强可维护性与安全性，可注册全局或局部自定义指令，在指令钩子中集成白名单过滤、属性限制等校验步骤，替代直接使用v-html。

1、定义指令对象，如名为htmlSafe的指令，在bind钩子中获取el与binding.value。

2、对binding.value执行基础校验，例如检测是否为字符串类型，是否包含script、iframe等危险标签：if (typeof value !== 'string' || /<(script|iframe|object|embed)/i.test(value)) { el.innerHTML = ''; return; }。

3、通过el.innerHTML = value完成注入，并在updated钩子中同步更新逻辑以响应数据变化。

好了，本文到此结束，带大家了解了《Vue模板与指令渲染全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！