Vue v-html 的使用

Vue v-html 的使用

最近的项目用到了富文本，富文本会将文字保存为 html 代码，而渲染 html 就需要用到 v-html

v-html 介绍

v-html 是Vue的一个组合模板， 用于动态渲染任意的 html 代码，因此能够也用于渲染富文本。

官网介绍：https://cn.vuejs.org/v2/api/#v-html

风险：容易导致 xss 攻击，因此需要对富文本内容进行过滤。

关于xss: https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB/954065?fr=aladdin

所以 v-html 指令慎用。

富文本内容渲染

下面是一段简短的富文本：

<p>刘慈欣给电子书读者的寄语读者朋友们大家好！</p>
<p>&nbsp; &nbsp; &nbsp;物理学中的三体问题看似简单，实则极其复杂，且至今无解，正是对这样一个基础问题的想象，产生了《三体》系列这三部小说。《三体》表达了对广漠而寂静的宇宙的敬畏，和对宇宙中可能存在的智慧他者的想象。也许，对这两方面的想象和思考触及了我们精神世界中最深层和最本质的部分，因而这三部小说才能被这么多的人阅读，产生了这么多的共鸣和理解。正像看似简单的三体问题仍然无解，在万分复杂的大自然中我们也无法预测未来，但科幻小说至少能为我们描述出许多种未来可能的图景，让我们在走向未来的路程中拥有更广阔的视野和更丰富的思想。在《三体》电子书与读者见面之际，再次感谢广大读者的关注和支持，</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;谢谢大家！刘慈欣2018.12.1</p>

代码截图：

渲染效果：