在v-for中动态生成不同的图标

226 阅读1分钟

直接说方法:

后台会返回图标的字段icon,然后在需要渲染成图标的标签上使用字符拼接的方式渲染出来:

案例:

<li class="production_col"     v-for="(item,index) of productionList"     :key="item.menuId"     :class="calcuProduction(index)"  >    <i class="module_icon"       :style="{background: `url(./image/${item.icon}.png) no-repeat`}">    </i>    <span class="icon_tit">{{item.menuName}}</span> </li>

注意一点,图标资源要放在public文件夹里