Vue 菜單欄點(diǎn)擊切換單個class(高亮)的方法
步驟：
遍歷對象（goods）獲取菜單欄每一項(xiàng)的對象（item）和下標(biāo)（index）
添加點(diǎn)擊事件toggle()，傳入下標(biāo)參數(shù)：@click="fn1();fn2()"
動態(tài)切換classname：:class="{'active':index ==checkindex }"> （class賦予對應(yīng)下標(biāo)值的DOM）
ps：該方法直接切換class，不需要手動添加清除其他非動態(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 // 初始化第一個欄塊高亮
}
},
methods: {
toggle (index) {
this.checkindex = index
}
css
.active {
background: white;
}
效果圖展示：
拓展知識：淺談element-ui下導(dǎo)航高亮犯過的錯
同事搭建的vue+elementui項(xiàng)目出了個bug，elementui導(dǎo)航高亮一直出錯。調(diào)試了3個多小時，來問我，結(jié)果悲劇地加班了。
最后實(shí)在不耐煩了，導(dǎo)航這塊放棄使用elementui組件，直接自己來寫了。今天有空，實(shí)在不服氣，自己寫了一個。結(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>
后來對比了下細(xì)節(jié)，發(fā)現(xiàn)自己是被同事帶坑了：總結(jié)當(dāng)時犯的錯誤（糾結(jié)的地方）
:default-active="$route.path"
這里定義當(dāng)前高亮。舉例：當(dāng)前頁面是總覽，通過打印，得知$route.path的值是 '/dashboard' 而不是 'dashboard'。前者是$route.path，后者是$route.name。后續(xù)會用到。
router>
這里沒什么好說的，直接router就行了。
<el-menu-item index="/dashboard">
這里就要根據(jù)前面的$route.path/$route.name來輸入值了。保證這三點(diǎn)基本無誤導(dǎo)航高亮基本就沒問題了。
至于其他花式寫法后面會繼續(xù)研究。
以上這篇Vue 菜單欄點(diǎn)擊切換單個class(高亮)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來看看吧。2017-05-05
Vue入門之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了解決Echarts 顯示隱藏后寬度高度變小的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中動態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)按需加載組件和異步組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
本篇文章主要介紹了Vue中組件數(shù)據(jù)的傳遞的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue實(shí)現(xiàn)select下拉顯示隱藏功能
這篇文章主要介紹了vue實(shí)現(xiàn)select下拉顯示隱藏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue 本地服務(wù)不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細(xì)，需要的朋友可以參考下2018-10-10
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12