Vue如何動態渲染html

大家在使用Vue時，一般使用 {{ Mustache }}或者 v-text進行插值，對此，官方給出的解釋是：

 

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。
通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：
<span v-once>這個將不會改變: {{ msg }}</span>

但是在項目中，經常會遇到的情況是后台傳給前端的數據不是單純的字符串，而是html代碼，比如資訊類的項目，需要我們將html代碼渲染到頁面中，{{mustache}}或者v-text會把html代碼當做純文本渲染出來，類似效果是這樣的：

 

 

對於這種情況，官方給出的解決方法是使用 v-html，官方解釋如下：

 

雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
這個 div 的內容將會被替換成為屬性值 rawHtml，直接作為 HTML——會忽略解析屬性值中的數據綁定。注意，你不能使用 v-html 來復合局部模板，因為 Vue 不是基於字符串的模板引擎。反之，對於用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。

實驗證明，這種方法真的很管用。

但是，這次我在項目中遇到的問題是，后台傳給我的數據是經過轉義后的html數據，格式如上圖所示，v-html只能渲染<span>this is span!</span>這種形式的html代碼，對於轉義過的代碼無法渲染。這時候，我們就要將轉義過的html代碼通過vue的filter(過濾器)轉義成為普通html代碼。

過濾器

Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。
過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。
過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示：

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

我們需要定義一個filter，用於將轉義過的? < > / \等符號轉義回來：

filters: {
        unescape:function (html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&')
                .replace(/&lt;/g, "<")
                .replace(/&gt;/g, ">")
                .replace(/&quot;/g, "\"")
                .replace(/&#39;/g, "\'");
        }
    }

然后在需要渲染值的地方，使用該filter:

 <div class="content" v-html="product.content | unescape"></div>

此時渲染出來的頁面如圖：

 

 

大功告成( ⊙ o ⊙ )！

PS：由於過濾器是一個函數，所以過濾器可以接受參數。在{{ message | filterA('arg1', arg2) }}中，filterA被定義為接收三個參數的過濾器函數。其中 message的值作為第一個參數，普通字符串 arg1 作為第二個參數，表達式 arg2 的值作為第三個參數。`