iconfont是字符串，怎么处理成正确的图标

Question

正常情况下，应该是这样的：

但是因为业务需求，需要动态展示：

就导致iconfont展示错误，因为icon不是字符串，这种应该怎么处理让他正确展示？

Answer 1

我在做weex项目，weex不支持before伪类，所以不能用类名形式展示图标，原来的想法破产！

不过！我发现了另一个方法，就是直接将字符串解码，这里用一个解码器：he

附上地址：https://github.com/mathiasbyn...

调用he.decode()可以将需要的html字符串解码

那么，怎么应用在我的需求上呢？

写一个过滤器，在过滤器中调用解码方法，这样便可将字符串格式的字符实体转化

html:

<text class="bar-ic iconfont">{{i.icon | myFilter}}</text>

js：

Vue.filter('myFilter', function(value) {
    return he.decode(value);
})

美滋滋~下班！

Answer 2

用v-html来渲染你的字符串

Answer 3

“转义实体”，你“原样”放到页面上就可以了，类似要放一段 html 到页面那种。 angular 中，是用 ng-bind-html 这种处理，其它框架也有类似的东西。

Answer 4

使用 mustache {{}} 会被转译的，要用 raw 的方式引用进去，记得原来几个版本的 vue 还可以用三个括号，
{{{}}}， 现在最好用 v-html:
<text calss="bar-ic iconfont" v-html="i.icon"></text>