vue實作點選導航欄切換變色的簡單方法

最近寫到導航欄的時候遇到一個問題，就是我們要實作導航欄中的被選中的項目高亮，而其他的項目保持原來的顔色，對于這種其實是有兩種情況的；

情況1—導航欄是通過v-for周遊生産的

這種生成導航欄的情況還是比較多的

在進行周遊的時候我們會去擷取被周遊數組的兩個東西，一個是item ,一個是index

//就像這樣
<li v-for="(item,index) in List " :key="index"></li>
           

當我們要給 li 動态的綁定一個樣式的時候，就需要判斷在什麼時候綁定，在什麼時候解綁；

index在這裡就可以被當作是一種記号，比如項目裡面有三個項目的時候，對應就會産生3個li，3個li對應的就是0，1，2；

我們可以在data部分定義一個變量 current 來存儲目前的 index ，隻有項目被标記的 index 和目前 current 存儲的 index 相同的時候樣式才會生效；

//active就是我們定義的樣式
<li v-for="(item,index) in movies" :key="index" @click="change(index)" :class="{active:index == current}">{{item}}</li>

//script部分
data(){
	return{
		current：0
	}
}
           

另外我們還需要監控 current 的改變的，這樣才能修正樣式，這個時候我們需要一個函數來幫助我們在點選導航欄的時候修改 current 的值

//添加修改函數,變量傳入目前index
<li v-for="(item,index)" in List :key="index" :class="{active: index ===  current}" @click="change(index)">{{item}}</li>

//script部分
methods:{
	change(index){
		this.current=index;
	}
}
           

這樣就能夠實作切換了；

情況2—router-link形成的導航欄

router-link也是我們經常使用的東西，這個也可以實作出一個導航欄；

這個相對來說就會比較容易

因為對于router-link标簽，它在被選中的時候vue會自動對其綁定一個樣式 router-link-active

從圖中可以看到，上面是被選中的，是以會有額外的class，下面沒有沒有選中的隻有自己的寫的class

這樣我們就直接對 router-link-active進行操作就好了

//html
<router-link to="/home/subhome" tag="a" class="tabItem" :class='{routerLinkActive}'>首頁</router-link>
//css
.router-link-active{
  color: red;
}
           

這樣就能夠實作切換了，也不用借助變量和函數，是不是更加簡單一點？