使用VueJS动态交换材料图标

时间:2017-03-29 04:21:13

标签: javascript vue.js vuejs2 google-material-icons

通常,我使用像这样的静态谷歌素材图标。

<i class="material-icons">&#xE85E;</i>

但是,我想使用VueJS的计算属性动态更改材质图标。我尝试了以下方法:

<i class="material-icons font-size-36-i">{{ materialIconCode }}</i>

computed: {
  materialIconCode: function () {
    return '&#xE85E'
  }
}

它不起作用,而是在页面上显示&# E E,但缺少数字。

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

https://jsfiddle.net/guanzo/tbm75a06/

mustache语法将数据解释为文本。使用指令v-html="materialIconCode"设置元素的html。