在Vue中动态插入HTML需用v-html指令渲染安全的HTML字符串，或配合v-pre跳过编译、用计算属性预处理、render函数构造VNode、mounted中操作innerHTML。
在Vue应用中，若需将动态数据作为HTML内容直接插入到页面中，而非以纯文本形式显示，则需要使用特定的模板语法与指令来实现。以下是完成此任务的具体方法：
一、使用v-html指令渲染HTML内容
v-html指令用于更新元素的innerHTML，它会将绑定的值作为HTML解析并渲染，而不是作为普通文本。该指令可替代插值表达式{{ }}对HTML字符串的转义行为，适用于已确认安全的富文本内容。
1、在Vue实例或组件的data选项中定义包含HTML标签的字符串，例如：content: ‘
这是加粗段落
‘。
2、在模板中使用v-html绑定该数据属性：
。
立即学习“前端免费学习笔记（深入）”；
3、确保该HTML字符串不来自不可信用户输入，否则可能引发XSS攻击。
二、使用v-pre跳过编译节点
v-pre指令用于跳过Vue对其所在节点及其所有子节点的编译过程，常用于展示原始模板语法或避免对含HTML结构的静态内容进行不必要的响应式处理。
1、在需要原样输出HTML代码的容器上添加v-pre属性：
。
2、若配合v-html使用，可用于防止Vue对v-html内部的插值表达式进行二次解析，例如：
。
三、通过计算属性预处理HTML字符串
当HTML内容需基于响应式数据动态生成时，可借助计算属性对原始数据进行过滤、拼接或格式化，再交由v-html渲染，从而增强可控性与安全性。
1、在Vue实例的computed选项中定义计算属性，返回处理后的HTML字符串：formattedContent() { return ‘
‘ + this.title + ‘
‘ + this.body + ‘
‘; }。
2、在模板中绑定该计算属性：
。
3、可在计算属性中嵌入白名单过滤逻辑，剔除script、onerror等危险标签与属性。
四、使用render函数手动构造VNode
对于高度定制化的HTML渲染需求，可绕过模板编译阶段，直接在render函数中通过createElement创建虚拟节点，精确控制每个子节点的类型、属性与子内容。
1、在组件选项中定义render函数，调用this.$createElement构造节点：render(h) { return h(‘div’, { domProps: { innerHTML: this.raw } }); }。
2、确保传入的raw为合法HTML字符串，并已在逻辑层完成消毒处理。
3、该方式不依赖v-html，但要求开发者完全掌握VNode结构及DOM映射规则。
五、结合DOM API在mounted钩子中操作innerHTML
在某些特殊场景下（如集成第三方富文本编辑器输出），可在组件挂载后直接操作真实DOM节点的innerHTML属性，实现HTML内容注入。
1、在模板中为容器设置ref属性：
。
2、在mounted生命周期钩子中获取DOM引用并赋值：this.$refs.htmlContainer.innerHTML = this.trustedHtml;。
3、注意该操作脱离Vue响应式系统，后续若需更新内容，必须再次手动调用innerHTML赋值。
以上就是Vue如何渲染HTML内容_模板与指令使用解析【进阶】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606027.html
微信扫一扫 
支付宝扫一扫 
