本文介绍在 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 字符串的方法,希望有所帮助。如有其他问题,欢迎留言交流。