【vue+element-ui】为v-for渲染出来的每一项添加各自的图标样式

qq_41800649

于 2020-06-02 22:44:50 发布

阅读量2.4k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41800649/article/details/106506949

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在VUE项目中使用data对象存储ID与图标类名的映射关系，并通过v-for循环为每个元素动态分配对应的图标。此方法提高了代码的可维护性和可读性。

摘要由CSDN通过智能技术生成

在data中添加一个对象menu，用于存储id与class类名的对应关系

 menuIcon: {
        125: "iconfont icon-yonghuguanli",
        103: "iconfont icon-quanxianguanli",
        101: "iconfont icon-shangpinguanli",
        102: "iconfont icon-dingdanguanli",
        145: "iconfont icon-shujutongji",
      },

在v-for循环出来的每一项上通过:class="menuIcon[item.id]"应用相应的class