Vue.js 中后台 HTML 字符串原样显示的解决方案

作者:模板散步

时间:2026-10-22

浏览:438

本文介绍在 Vue.js 开发中,如何处理后台返回的原生 HTML 字符串并正确渲染为 HTML 代码。重点说明 Vue 2.0 中废弃 {{{}}} 语法,推荐使用 v-html 指令进行安全且规范的 HTML 内容绑定。

文章目录

Vue.js 中 HTML 字符串渲染问题

在 Vue 页面调试过程中,发现后台返回的 HTML 字符串未被正确解析为 HTML 代码。为解决此问题,尝试使用 {{{}}} 语法进行转换,但在构建阶段遇到报错。

使用 v-html 指令解决渲染问题

查阅官方文档得知,在 Vue 2.0 及以上版本中,{{{}}} 转换 HTML 的方式已被废弃。当前版本必须使用 v-html 指令来实现 HTML 内容的渲染,具体用法如下:


<span v-html="htmlData">
 {{htmlData}}
</span>

总结

以上介绍了 Vue.js 中处理后台原生 HTML 字符串的方法,希望有所帮助。如有其他问题,欢迎留言交流。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章