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>

代碼截圖：

渲染效果：