Vue 將數據庫中帶html標籤的內容輸出 (原始 HTML(Raw HTML))

原始 HTML(Raw HTML)

雙花括號語法，會將數據中的 HTML 轉爲純文本後再進行插值。爲了輸出真正的 HTML，你需要使用 v-html 指令：

<p>使用雙花括號語法：{{ rawHtml }}</p>
<p>使用 v-html 指令：<span v-html="rawHtml"></span></p>

使用雙花括號語法：<span style="color: red">This should be red.</span>
使用 v-html 指令：This should be red.

span 中的內容，將會被替換爲 rawHtml 屬性的值，並且作爲原始 HTML 插入 - 會忽略解析屬性值中的數據綁定。請注意，無法使用v-html來組合局部模板，這是因爲 Vue 不是基於字符串(string-based)的模板引擎。反之，對於用戶界面(UI)，組件更適合作爲可重用和可組合的基本單位。

在網站中動態渲染任意的 HTML 是非常危險的，因爲這很容易導致網站受到 XSS 攻擊。請只對可信內容使用 HTML 插值，絕對不要對用戶提供的內容使用 HTML 插值。