vue渲染经过转义的html字符串

Question

vue渲染经过转义的html字符串
字符串类似于 <img height="18" width="18" style="vertical-align:middle" src="fengle.png">
最终在网页中展示为图片

Answer 1

在vue实例中定义一个filter，类似于
new Vue({
// ...
filters: {

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

}
})

在模板中进行数据绑定时,使用定义filter，如：{{{string | unescape}}}
这样可以渲染出转义过的html字符串。

Answer 2

http://underscorejs.org/#unes...

http://cn.vuejs.org/v2/api/#v...

Answer 3

除了使用v-html和filter，
还可以使用

function htmlDecode(str) {
    let e = document.createElement('div');
    e.innerHTML = str;
    return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
};

Answer 4

我想你问的是 v-html!