应使用v-html指令渲染可信HTML内容，或结合DOMPurify净化后注入；也可用render函数构造VNode规避XSS，或通过自定义指令封装校验逻辑。
如果您在Vue应用中需要将字符串作为HTML内容动态插入到页面中，而不是以纯文本形式显示，则必须使用特定的模板语法和指令来实现安全且正确的渲染。以下是实现此目标的具体方法：
v-html指令用于将数据作为HTML内容直接插入元素内部，它会替换元素的innerHTML。该指令会忽略数据中的HTML转义字符，并执行原生HTML解析，因此需确保内容可信，避免XSS风险。
1、在Vue实例或组件的data选项中定义包含HTML标签的字符串，例如：message: '红色文字 加粗内容'。
2、在模板中绑定该数据到元素上，使用v-html指令：。
立即学习“前端免费学习笔记（深入）”；
3、Vue将自动解析message字符串中的HTML标签并渲染为对应DOM结构，而非显示原始标签文本。
标准双大括号插值{{ }}默认对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函数提供比模板更底层的控制能力，允许开发者完全绕过HTML字符串解析过程，直接构造虚拟节点树。适用于需要精细控制DOM生成逻辑、或动态生成复杂嵌套结构的场景。
1、在组件选项中定义render函数，不使用template字段。
2、使用Vue提供的h函数创建VNode，例如：h('div', [h('span', { style: { color: 'blue' } }, '蓝色文字'), h('em', '斜体内容')])。
3、返回该VNode结构，Vue将据此生成真实DOM，所有内容均经由框架内部机制构建，天然免疫XSS攻击。
为统一管理HTML渲染入口、增强可维护性与安全性，可注册全局或局部自定义指令，在指令钩子中集成白名单过滤、属性限制等校验步骤，替代直接使用v-html。
1、定义指令对象，如名为htmlSafe的指令，在bind钩子中获取el与binding.value。
2、对binding.value执行基础校验，例如检测是否为字符串类型，是否包含script、iframe等危险标签：if (typeof value !== 'string' || /。
3、通过el.innerHTML = value完成注入，并在updated钩子中同步更新逻辑以响应数据变化。
以上就是Vue如何渲染HTML内容_模板与指令使用解析【指南】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
167
