在Vue中动态插入HTML需用v-html指令渲染安全的HTML字符串，或配合v-pre跳过编译、用计算属性预处理、render函数构造VNode、mounted中操作innerHTML。
在Vue应用中，若需将动态数据作为HTML内容直接插入到页面中，而非以纯文本形式显示，则需要使用特定的模板语法与指令来实现。以下是完成此任务的具体方法：
v-html指令用于更新元素的innerHTML，它会将绑定的值作为HTML解析并渲染，而不是作为普通文本。该指令可替代插值表达式{{ }}对HTML字符串的转义行为，适用于已确认安全的富文本内容。
1、在Vue实例或组件的data选项中定义包含HTML标签的字符串，例如：content: ' 这是加粗段落
2、在模板中使用v-html绑定该数据属性：。
立即学习“前端免费学习笔记（深入）”；
3、确保该HTML字符串不来自不可信用户输入，否则可能引发XSS攻击。
v-pre指令用于跳过Vue对其所在节点及其所有子节点的编译过程，常用于展示原始模板语法或避免对含HTML结构的静态内容进行不必要的响应式处理。
1、在需要原样输出HTML代码的容器上添加v-pre属性：
2、若配合v-html使用，可用于防止Vue对v-html内部的插值表达式进行二次解析，例如：。
当HTML内容需基于响应式数据动态生成时，可借助计算属性对原始数据进行过滤、拼接或格式化，再交由v-html渲染，从而增强可控性与安全性。
1、在Vue实例的computed选项中定义计算属性，返回处理后的HTML字符串：formattedContent() { return ' ' + this.body + '' + this.title + '
2、在模板中绑定该计算属性：。
3、可在计算属性中嵌入白名单过滤逻辑，剔除script、onerror等危险标签与属性。
对于高度定制化的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节点的innerHTML属性，实现HTML内容注入。
1、在模板中为容器设置ref属性：
2、在mounted生命周期钩子中获取DOM引用并赋值：this.$refs.htmlContainer.innerHTML = this.trustedHtml;。
3、注意该操作脱离Vue响应式系统，后续若需更新内容，必须再次手动调用innerHTML赋值。
以上就是Vue如何渲染HTML内容_模板与指令使用解析【进阶】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
313
取消收藏
