溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法

發(fā)布時(shí)間：2020-10-14 13:45:50 來源：腳本之家 閱讀：194 作者：JeyungXie 欄目：web開發(fā)

步驟：

遍歷對(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;
 }

效果圖展示：

Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法

Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法

拓展知識(shí)：淺談element-ui下導(dǎo)航高亮犯過的錯(cuò)

同事搭建的vue+elementui項(xiàng)目出了個(gè)bug，elementui導(dǎo)航高亮一直出錯(cuò)。調(diào)試了3個(gè)多小時(shí)，來問我，結(jié)果悲劇地加班了。

最后實(shí)在不耐煩了，導(dǎo)航這塊放棄使用elementui組件，直接自己來寫了。今天有空，實(shí)在不服氣，自己寫了一個(gè)。結(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>

后來對(duì)比了下細(xì)節(jié)，發(fā)現(xiàn)自己是被同事帶坑了：總結(jié)當(dāng)時(shí)犯的錯(cuò)誤（糾結(jié)的地方）

:default-active="$route.path"

這里定義當(dāng)前高亮。舉例：當(dāng)前頁面是總覽，通過打印，得知$route.path的值是 '/dashboard' 而不是 'dashboard'。前者是$route.path，后者是$route.name。后續(xù)會(huì)用到。

router>

這里沒什么好說的，直接router就行了。

<el-menu-item index="/dashboard">

這里就要根據(jù)前面的$route.path/$route.name來輸入值了。保證這三點(diǎn)基本無誤導(dǎo)航高亮基本就沒問題了。

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

以上這篇Vue 菜單欄點(diǎn)擊切換單個(gè)class(高亮)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手