vue如何實(shí)現(xiàn)菜單切換功能

小編給大家分享一下vue如何實(shí)現(xiàn)菜單切換功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue實(shí)現(xiàn)菜單切換，點(diǎn)擊菜單導(dǎo)航切換不同的內(nèi)容以及為當(dāng)前點(diǎn)擊的選項(xiàng)添加樣式，或者組件。

html代碼：

<nav>
 <ul>
 <li>
 <a :class="{active : Index == 1}" @click="changeNav(1)">學(xué)校新聞</a>
 <div v-if="Index == 1" class="line"></div>
 </li>
 <li>
 <a :class="{active : Index == 2}" @click="changeNav(2)">就業(yè)新聞</a>
 <div v-if="Index == 2" class="line"></div>
 </li>
 <li>
 <a :class="{active : Index == 3}" @click="changeNav(3)">行業(yè)新聞</a>
 <div v-if="Index == 3" class="line"></div>
 </li>
 </ul>
 </nav>

js代碼：

data () {
 return {
 Index:1,
}
 },

methods:

{//導(dǎo)航切換
changeNav(index){
 if(index == 1){

 this.Index = 1;
 }else if(index == 2){
 this.Index = 2;
 }else if(index == 3){
 this.Index = 3
 }
 },

css代碼：

.news-container nav li .line{
 width: 50px;
 height: 4px;
 background: #E96463;
 border: none;
 position: relative;
 top: -4px;
 right: -86px;
}
.news-container nav li .active{
 color: rgba(233,100,99,1);
}
}

以上是“vue如何實(shí)現(xiàn)菜單切換功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！