方法一:使用uniapp官方插件:

<rich-text :nodes="noticeInfo.content"></rich-text>

:nodes传后台相应属性的值

缺点:不能实现图片点击预览,格式有限。

更多信息详见官方文档:rich-text | uni-app官网

方法二:使用uniapprtDCloud 插件市场其他组件,这里推荐mp-html:mp-html 富文本组件【全端支持,支持编辑、latex等扩展】 - DCloud 插件市场

这个插件平台兼容性,更新日期较近,说明开发团队在维护。

用法:

<mp-html :content="noticeInfo.content" />

:content传后台相应属性的值。

方法三:v-html

用法:

<view v-html="noticeInfo.content"></view>

v-html 可以 实现基础的富文本展示,但存在 安全性、样式兼容性和功能限制,不推荐。

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐