结构:

<ul>
   <li v-for='(item,index) in menumap' :key='index' :ref='item.url' :class='{active:index==isActive}' @click='switchmenu(index)'>
      <router-link :to='item.url'>{{item.title}}</router-link>
   </li>
 </ul>

数据:初始值设为0是让第一个元素默认有类名

isActive: 0,
menumap: [
        {
          url: '/chinamobile/projectmanage',
          title: '项目管理'
        },
        {
          url: '/chinamobile/qualitymanage',
          title: '质量管理'
        },
        {
          // url: '/chinamobile/MochaITOM',
          url: '/chinamobile/projectmanage',
          title: '运维管理'
        },
        {
          // url: '/chinamobile/ishare',
          url: '/chinamobile/projectmanage',
          title: '知识共享'
        }
      ]

切换方法

switchmenu (index) {
      this.isActive = index
    }

即可实现,点击动态添加类名active

Logo

前往低代码交流专区

更多推荐