vue實(shí)現(xiàn)菜單切換功能
更新時(shí)間：2019年05月08日 09:44:44 作者：遇你溫柔如初
這篇文章主要介紹了vue實(shí)現(xiàn)菜單切換功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vue實(shí)現(xiàn)菜單切換，點(diǎn)擊菜單導(dǎo)航切換不同的內(nèi)容以及為當(dāng)前點(diǎn)擊的選項(xiàng)添加樣式，或者組件。
method里：
css:
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);
}
}
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)菜單切換功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
一次vue項(xiàng)目?jī)?yōu)化的實(shí)際操作記錄
用vue開(kāi)發(fā)項(xiàng)目上線以后,發(fā)現(xiàn)首頁(yè)加載速度非常慢,如果項(xiàng)目比較大,甚至可能出現(xiàn)10s以上的等待,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目?jī)?yōu)化的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue?el-table中使用el-select選中后無(wú)效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例
Vue本來(lái)無(wú)需操作DOM來(lái)更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)頁(yè)面中播放音頻文件的相關(guān)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷(xiāo)毀的操作
這篇文章主要介紹了vue keep-alive實(shí)現(xiàn)多組件嵌套中個(gè)別組件存活不銷(xiāo)毀的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊
本文主要介紹了Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue是一個(gè)流行的前端框架，許多web開(kāi)發(fā)人員使用Vue來(lái)構(gòu)建他們的應(yīng)用程序。然而，正如任何其他框架一樣，Vue也可能會(huì)發(fā)生錯(cuò)誤。在這篇技術(shù)文章中，我們將探討Vue常見(jiàn)的報(bào)錯(cuò)以及如何解決它們2023-03-03
這篇文章主要為大家分享了一篇值得收藏的vuejs安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue與bootstrap實(shí)現(xiàn)簡(jiǎn)單用戶信息添加刪除功能
這篇文章主要為大家詳細(xì)介紹了vue與bootstrap實(shí)現(xiàn)簡(jiǎn)單用戶信息添加刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02