Vue - Parse Rich Text (v-html directive)

foreword

If your project is just parsing simple rich text, then the solution in this article is recommended, otherwise it is recommended that you use a full-featured third-party plugin.

Many systems will have the need to parse rich text, such as the following rich text data,

`<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">
`

The front end is parsed and displayed, as shown in the following figure:

solution

Simple parsing, v-html directive is undoubtedly the best solution, simple and fast, and no need to install plugins.