Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法

更新時(shí)間：2018年08月22日 16:42:42 作者：JeyungXie

今天小編就為大家分享一篇Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

步驟：

遍歷對(duì)象（goods）獲取菜單欄每一項(xiàng)的對(duì)象（item）和下標(biāo)（index）

添加點(diǎn)擊事件toggle()，傳入下標(biāo)參數(shù)：@click="fn1();fn2()"

動(dòng)態(tài)切換classname：:class="{'active':index ==checkindex }"> （class賦予對(duì)應(yīng)下標(biāo)值的DOM）

ps：該方法直接切換class，不需要手動(dòng)添加清除其他非動(dòng)態(tài)DOM的class

html

<ul>
   <li v-for="(item,index) in goods" class="menu-item" @click="toggle(index);scrollToFoods(index)"
   :class="{'active':index ==checkindex }">
   </li>
  </ul>

script

export default {
 data () {
  return {
  checkindex: 0 // 初始化第一個(gè)欄塊高亮
  }
 },
 methods: {
  toggle (index) {
  this.checkindex = index
  }

css

 .active {
 background: white;
 }

效果圖展示：

拓展知識(shí)：淺談element-ui下導(dǎo)航高亮犯過的錯(cuò)

同事搭建的vue+elementui項(xiàng)目出了個(gè)bug，elementui導(dǎo)航高亮一直出錯(cuò)。調(diào)試了3個(gè)多小時(shí)，來問我，結(jié)果悲劇地加班了。

最后實(shí)在不耐煩了，導(dǎo)航這塊放棄使用elementui組件，直接自己來寫了。今天有空，實(shí)在不服氣，自己寫了一個(gè)。結(jié)果直接就過了。

貼上代碼：

<template>
 <el-menu
 :default-active="$route.path"
 background-color="#383838"
 text-color="#ccc"
 active-text-color="#fff000" router>
 <el-menu-item index="/dashboard">
  <span slot="title">總覽</span>
 </el-menu-item>
 <el-submenu index="2">
  <template slot="title">導(dǎo)航1</template>
  <el-menu-item index="/nav1/index">導(dǎo)航11</el-menu-item>
  <el-submenu index="2-2">
  <template slot="title">導(dǎo)航12</template>
  <el-menu-item index="/nav2/nav1">導(dǎo)航121</el-menu-item>
  <el-menu-item index="/nav2/nav2">導(dǎo)航122</el-menu-item>
  </el-submenu>
 </el-submenu>
 </el-menu>
</template>

后來對(duì)比了下細(xì)節(jié)，發(fā)現(xiàn)自己是被同事帶坑了：總結(jié)當(dāng)時(shí)犯的錯(cuò)誤（糾結(jié)的地方）