【问题标题】:Dynamically Swapping Material Icons with VueJS使用 VueJS 动态交换材质图标
【发布时间】:2017-08-22 09:29:50
【问题描述】:

一般来说,我使用像这样的静态谷歌素材图标。

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

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

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

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

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

有什么想法吗?

【问题讨论】:

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


    【解决方案1】:

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

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

    【讨论】:

    • 对于任何未来的读者,v-html 指令容易受到 XSS 的影响,您应该相应地保护您的应用程序
    猜你喜欢
    • 2021-04-18
    • 2016-09-08
    • 2018-01-02
    • 2021-11-15
    • 2019-11-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-04
    • 1970-01-01
    相关资源
    最近更新 更多