在Vue中获取v-for的index值

Tiger_Paul

于 2022-02-19 18:07:11 发布

阅读量7.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Tiger_Paul/article/details/123021744

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的前端菜单动态渲染方法，通过v-for遍历menuList，利用图标和授权名称展示权限管理菜单。通过icons数组映射不同权限级别的图标，适合理解前端菜单设计和权限控制的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-submenu :index="item.id+''" v-for="(item,index) in menuList" :key="item.id">
<template slot="title">
  <i :class="icons[index]"></i>
  <span>{{item.authName}}</span>
</template>

data() {
    return {
      icons: ['el-icon-s-custom', 'el-icon-s-claim', 'el-icon-s-goods', 'el-icon-s-order', 'el-icon-s-data']
    }

v-for="(item,index) in menuList"