本文主要是介绍[Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
记录一次在Vue中动态使用阿里巴巴矢量图标库
这是本人第一次使用阿里巴巴的矢量图标库，简单的导入和使用的话网上的教程很多，这里不多赘述，本人的需求是从数据库中加载出来并且显示到页面上，接下来简述一下如何实现。
以下代码均是本人实际推敲、测试可用后写出来的，请放心食用。
前言
阿里巴巴矢量图标库（以下简称阿里巴巴图标）针对每一个图标提供了三种编码方式，分别是Unicode、Font class、Symbol。它们的名称特点如下：
方式一 | 动态加载Unicode编码
如上图所示：Unicode图标的名字是以&开头;结尾的一个编码，在阿里巴巴的官方教程中它的使用如下：
官方写法：
<i class="iconfont"></i>
错误写法：针对这种编码方式的动态加载，我在网上并没有找到可用的教程。不过我的理解很简单，标签里面的class="iconfont"写死，标签中间写上它的编码就可以。我最初的想法很简单，用插值表达式嘛，所以代码如下（失败了）：
<i class="iconfont">{{item.icon}}</i>
上面的代码仅仅是将数据库中的一段显示的放在了前端，效果嘛，本来该出现图标的位置出现的是
这一串字符。
正确写法：稍作思考后，我想到了HTML中常用的空格，也就是 等。我觉得Unicode编码也许不能作为文本来处理，应该用html来处理，因此我们应该使用v-html来取代插值表达式，代码如下：
<i class="iconfont" v-html="item.icon"></i>
我在数据库中存储的数据如下（显示效果如右侧所示）：
方式二 | 使用Font class的方式
其实Font class的图标我觉得更好用一些，使用起来有点像是element-ui的图标，官方教程如下。
官方写法：
<span class="iconfont icon-sp-xxx"></span>
'icon-sp-'是我自己定义的前缀，下载图标的时候可以设置。
这种写法很简单，因此如果要从数据库中查出来显示到前端的话，只要如下就可以（注意空格）：
<i :class="'iconfont '+item.icon"></i>
相较于官方教程写死class，这种方式只不过是给class绑定了一个字符串 + 空格 + item，很好理解，不多赘述，下面是我数据库中存储的数据与前端显示效果：
记得存储的时候忽略最前面的.
第三种方式就省略吧，因为针对于动态导入，我们考虑的只有名字或者是编码，而只看名字的话，第二种种方式和第三种方式别无二致，一样用吧。
拓展
当然了，针对方式二稍作改变，将iconfont icon-sp-shezhi这整个字段存储在数据库中，然后前段代码如下也是可以显示的：
<i :class="item.icon"></i>
数据库中存储数据与显示效果如下所示：
这篇关于[Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
