Vue 菜單欄點擊切換單個class(高亮)的方法

2019-11-19 13:11:09

字體：大中小

來源：轉載

供稿：網友

步驟：

遍歷對象（goods）獲取菜單欄每一項的對象（item）和下標（index）

添加點擊事件toggle()，傳入下標參數：@click="fn1();fn2()"

動態切換classname：:class="{'active':index ==checkindex }"> （class賦予對應下標值的DOM）

ps：該方法直接切換class，不需要手動添加清除其他非動態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 // 初始化第一個欄塊高亮  } }, methods: {  toggle (index) {  this.checkindex = index  }

css

 .active { background: white; }

效果圖展示：

拓展知識：淺談element-ui下導航高亮犯過的錯

同事搭建的vue+elementui項目出了個bug，elementui導航高亮一直出錯。調試了3個多小時，來問我，結果悲劇地加班了。

最后實在不耐煩了，導航這塊放棄使用elementui組件，直接自己來寫了。今天有空，實在不服氣，自己寫了一個。結果直接就過了。

貼上代碼：

<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">導航1</template>  <el-menu-item index="/nav1/index">導航11</el-menu-item>  <el-submenu index="2-2">  <template slot="title">導航12</template>  <el-menu-item index="/nav2/nav1">導航121</el-menu-item>  <el-menu-item index="/nav2/nav2">導航122</el-menu-item>  </el-submenu> </el-submenu> </el-menu></template>

后來對比了下細節，發現自己是被同事帶坑了：總結當時犯的錯誤（糾結的地方）