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

步驟：

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊和靠譜的建站技術(shù)，十多年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都成百上千家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，品牌網(wǎng)站制作，同時也為不同行業(yè)的客戶提供網(wǎng)站制作、成都網(wǎng)站設(shè)計的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)公司。

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

添加點擊事件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項目出了個bug，elementui導(dǎo)航高亮一直出錯。調(diào)試了3個多小時，來問我，結(jié)果悲劇地加班了。

最后實在不耐煩了，導(dǎo)航這塊放棄使用elementui組件，直接自己來寫了。今天有空，實在不服氣，自己寫了一個。結(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來輸入值了。保證這三點基本無誤導(dǎo)航高亮基本就沒問題了。

至于其他花式寫法后面會繼續(xù)研究。

以上這篇Vue 菜單欄點擊切換單個class(高亮)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：Vue菜單欄點擊切換單個class(高亮)的方法
文章轉(zhuǎn)載：http://muchs.cn/article4/ijosoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、搜索引擎優(yōu)化、電子商務(wù)、網(wǎng)站設(shè)計公司、網(wǎng)站改版、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)