Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法
步驟：
遍歷對(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)航高亮犯過(guò)的錯(cuò)
同事搭建的vue+elementui項(xiàng)目出了個(gè)bug，elementui導(dǎo)航高亮一直出錯(cuò)。調(diào)試了3個(gè)多小時(shí)，來(lái)問(wèn)我，結(jié)果悲劇地加班了。
最后實(shí)在不耐煩了，導(dǎo)航這塊放棄使用elementui組件，直接自己來(lái)寫了。今天有空，實(shí)在不服氣，自己寫了一個(gè)。結(jié)果直接就過(guò)了。
貼上代碼：
<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>
后來(lái)對(duì)比了下細(xì)節(jié)，發(fā)現(xiàn)自己是被同事帶坑了：總結(jié)當(dāng)時(shí)犯的錯(cuò)誤（糾結(jié)的地方）
:default-active="$route.path"
這里定義當(dāng)前高亮。舉例：當(dāng)前頁(yè)面是總覽，通過(guò)打印，得知$route.path的值是 '/dashboard' 而不是 'dashboard'。前者是$route.path，后者是$route.name。后續(xù)會(huì)用到。
router>
這里沒(méi)什么好說(shuō)的，直接router就行了。
<el-menu-item index="/dashboard">
這里就要根據(jù)前面的$route.path/$route.name來(lái)輸入值了。保證這三點(diǎn)基本無(wú)誤導(dǎo)航高亮基本就沒(méi)問(wèn)題了。
至于其他花式寫法后面會(huì)繼續(xù)研究。
以上這篇Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中響應(yīng)式系統(tǒng)實(shí)現(xiàn)原理圖文講解
Vue的響應(yīng)式實(shí)現(xiàn)是借助Object.defineProperty通過(guò)重寫getter和setter方法來(lái)進(jìn)行的數(shù)據(jù)劫持，Vue3通過(guò)Proxy代理攔截對(duì)象中任意屬性的變化，通過(guò)Reflect反射對(duì)源對(duì)象的屬性進(jìn)行操作，然后再在get里收集依賴在set里派發(fā)更新2023-03-03
Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗(yàn)功能
在實(shí)際開發(fā)過(guò)程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時(shí)進(jìn)行校驗(yàn),本文給大家介紹了Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗(yàn)功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下2024-08-08
在vue中使用image-webpack-loader實(shí)例
這篇文章主要介紹了在vue中使用image-webpack-loader實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
今天小編就為大家分享一篇關(guān)于vue項(xiàng)目打包之后背景樣式丟失的解決方案，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要介紹了vue中onmounted周期里獲取不到dom的原因及分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue?+?qiankun?項(xiàng)目搭建過(guò)程
這篇文章主要介紹了vue?+?qiankun?項(xiàng)目搭建,首先是通過(guò)cli3構(gòu)建vue2項(xiàng)目，通過(guò)qiankun改造主應(yīng)用，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)
這篇文章主要介紹了詳解vue移動(dòng)端項(xiàng)目的適配(以mint-ui為例)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度
網(wǎng)站頁(yè)面的響應(yīng)速度與用戶體驗(yàn)息息相關(guān),直接影響到用戶是否愿意繼續(xù)訪問(wèn)你的網(wǎng)站,所以這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包、合并及壓縮優(yōu)化網(wǎng)頁(yè)響應(yīng)速度的相關(guān)資料,需要的朋友可以參考下2021-07-07
Vue項(xiàng)目中components組件(模板)的使用及說(shuō)明
這篇文章主要介紹了Vue項(xiàng)目中components組件(模板)的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
組件化是為了方便代碼復(fù)用，提高開發(fā)效率。今天腳本之家小編給大家分享常見的vue組件寫法四種，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04