uniapp遍历iconfont，动态绑定style

微信截图_20220816090042.png

由于是引入的第三方iconfont的字体图标，此时又需要遍历出来，那么如何遍历iconfont呢？此时就用到了unicode。如 &#x转为\u，就变成了\ue614

• template部分

<view 
  v-for="(item,index) in tabBars" 
  :key="index" 
  :class="tabIndex===index?'active':''"
  @click="changeTab(index)"
>
<view 
  class="iconfont icon-box" 
  :style="{background:item.color1}"
>
  {{item.icon}}
</view>
  {{item.name}}
</view>

data中

data() {
            return {
                tabBars: [{

                        name: '专题',
                        icon: '\ue614',
                        color1: '#398ADE'
                    },
                    {
                        name: '知识',
                        icon: '\ue666',
                        color1: '#18BC37'
                    },
                    {
                        name: '活动',
                        icon: '\ueb8f',
                        color1: '#F0AD4E'
                    },
                    {
                        name: '课程',
                        icon: '\ue727',
                        color1: '#398ADE'
                    },
                ],
                tabIndex: 0,
            }
        },