Vue v-html显示富文本列表问题

后端返回的数据

let obj = {"id":501,"content":"<p><span style=\"color: rgb(34, 34, 34);\">  读书是一件快乐的事情。对于爱读书的人一但读上就让人欲罢不能,无法放弃读书,想让人读到天涯海角。有人说:“人生最深最平和的快乐,就是静观天地与人生,慢慢品味出它的和谐与美。”静下心来,翻开书本,那些沉积的墨香一点点溢满空间,那些尘封的快乐一点点打开。读书真的很快乐!</span></p><p><span style=\"color: rgb(34, 34, 34);\"><span class=\"ql-cursor\"></span>  到了初中,我们有七门功课,然而我最喜欢读的功课是历史和语文:我喜欢读历史是因为我想明白我们中国开国五千年以来的辉煌和耻辱。我要以我们国家的辉煌引以为豪,将我们国家的耻辱铭记在心;读语文是因为我想明白我们中国的文化基础是多么的雄厚,唐诗宋词是多么的让人陶醉,我们中国有多少领先于世界前列的文化。</span></p>"}

首先我通过v-html转一下效果如下
在这里插入图片描述
在这里插入图片描述
经过转换显示出来的是有两行 每一行都有一个P标签所以这样显示都不是很完整,想达到的效果是所有都显示出来因为返回的富文本内容都html标签,所以要做个正则的处理

v-html="list.content.replace(/<\/?.+?\/?>/g, '')"

在这里插入图片描述

这样得到就是想要的效果,在此记录一下~~

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜天生i

如果本文对你有所帮助点赞就好~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值