关于在vue中使用iconfont循环

也第一碰见这个问题，就记录一下
目前两种方法
一个是使用 unicode
一个是使用 font-class
第一种是介绍使用unicode

						<block v-for="(item1, index) in icon" :key="item1">
							<i class="iconfont" :style="item1.iconbg">{{ item.type == item1.id ? item1.icontent : '' }}	
							</i>
						</block>

数据
在数据中需注意的是，一般我们unicode是这样的 但是在数据中要变成 \u+e6b8==》\ue6b8
别问为啥，我也不知道，只是在网上看别人这样就可以
icon: [
{
id: 1,
iconbg: ‘color:#B3E19B’,
icontent: ‘\ue6b0’
},
{ id: 2, iconbg: ‘color:#FFC480’, icontent: ‘\ue6a7’ },
{
id: 3,
iconbg: ‘color:#87CDFF’,
icontent: ‘\ue6a6’
},
{
id: 4,
iconbg: ‘color:#FF9E86’,
icontent: ‘\ue6b4’
},
】

第二种就是比较好容易点
font-class

						<block v-for="(item1, index) in icon" :key="item1">
							<i class='iconfont'+' '+'item.iconclas' :style="item1.iconbg">{{ item.type == item1.id ? item1.icontent : '' }}	
							</i>
						</block>

这个要注意的就是iconfont后面要加一个空格
数据
icon:[
{
id: 4,
iconbg: ‘color:#FF9E86’,
iconclas: ‘\ue6b4’
},
]
在iconfont中的font-class中直接复制需要的字体就行

在下载的本地包中可以使用before之前的类名

在数据中也可以加一些标题来使用，便捷方便