溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
步驟：
遍歷對象（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>
后來對比了下細節，發現自己是被同事帶坑了：總結當時犯的錯誤（糾結的地方）
:default-active="$route.path"
這里定義當前高亮。舉例：當前頁面是總覽，通過打印，得知$route.path的值是 '/dashboard' 而不是 'dashboard'。前者是$route.path，后者是$route.name。后續會用到。
router>
這里沒什么好說的，直接router就行了。
<el-menu-item index="/dashboard">
這里就要根據前面的$route.path/$route.name來輸入值了。保證這三點基本無誤導航高亮基本就沒問題了。
至于其他花式寫法后面會繼續研究。
以上這篇Vue 菜單欄點擊切換單個class(高亮)的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
