字体图标的使用以及动态图标

开发小程序时有一个需求是将字体图标和点击高亮效果使用动态添加类

1.定义一个数组，使用v-for去渲染字体图标，

iconList: [{
    id: 1,
    name: 'icon-dianzan'
}, {
    id: 2,
    name: 'icon-shoucang'
}],
iconId: ''

2.根据点击的id去添加动态类名，数组的形式**:class="[item.name,{'active': iconId === item.id}]"**

<button @click="handle(item.id)" v-for="item in iconList">
<!-- 动态类名，动态加载数组对象的icon字体图标，三元表达式点击切换高亮效果 -->
    <span class="iconfont" :class="[item.name,{'active': iconId === item.id}]"></span>
</button>