v-for如何循环iconfont图标

 

 

 项目中需要做成以上那种样式，我将iconfont单独写了出来进行循环，以下：

export const iconList = [
    {
        id: '001',
        title: '产品配置',
        unicode: '\ue620'   // 此处最重要
    },
    {
        id: '002',
        title: '卡券产品管理',
        unicode: '\ue6d4'
    },
    {
        id: '003',
        title: '订单生成',
        unicode: '\ue661'
    },
    {
        id: '004',
        title: '商户信息管理',
        unicode: '\ue678'
    },
    {
        id: '005',
        title: '结算单管理',
        unicode: '\ue641'
    },
    {
        id: '006',
        title: '订单查询',
        unicode: '\ue668'
    }
]

　　在循环该数组时，会去iconfont中查找，如果不加 u 的话，会输出为字符串，所以必须在 e前加上u

最重要的一点就是一定要在你循环的元素标签中加入class=“iconfont”

<div class="custom-menu" v-for="item in clubMenuData" :key="item.taskcode">
  <h3 class="custom-menu-title">{{ item.menucname }}</h3>
  <ul class="custom-menu-list">
     <li
        class="custom-menu-item"
        v-for="menus in item.children"
        :key="menus.taskcode"
        :index="menus.taskcode">
          <span v-for="icon in iconList" :key="icon.id">
            <i class="iconfont" v-if="icon.title == menus.menucname">{{icon.unicode}}</i>
          </span>
  
          <el-tooltip class="item" effect="dark" :content="menus.menucname" placement="top">
            <span class="menus-item">{{ menus.menucname }}</span>
          </el-tooltip>
              
          <i class="iconfont icon-dingyue" @click="addMenus"/>
     </li>
  </ul>
</div>