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>