Vue如何动态渲染html

Vue
大家在使用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 的值作为第三个参数。`