Vue - 解析富文本（v-html 指令）_vue 富文本解析

作者：weixin_40725706 | 2024-02-20 19:49:15

踩

vue 富文本解析

前言

如果您的项目只是解析简单的富文本，那么推荐使用本文的解决方案，反之建议您使用功能齐全的第三方插件。

很多系统都会有解析富文本的需求，例如以下富文本数据，

`<h1>李拴蛋</h1>
<a href="http://www.baidu.com">百度</a>
<span style="color:red">红色文字</span><br>
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
`
1
2
3
4
5

前端解析并显示出来，如下图所示：
在这里插入图片描述

解决方案

简单的解析，v-html 指令无疑是最好的方案，简单快速且无需安装插件

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/120744