700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Vue v-html显示富文本列表问题

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

时间:2022-12-22 23:24:18

相关推荐

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, '')"

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。