vue實(shí)現(xiàn)菜單切換功能
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)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)
過(guò)去在Vue2中,我們采用ref來(lái)獲取標(biāo)簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2022-11-11vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析
這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03Vue項(xiàng)目中token驗(yàn)證登錄(前端部分)
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目中token驗(yàn)證登錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對(duì)話框是一種常見的組件,用于在用戶與應(yīng)用程序進(jìn)行交互時(shí)顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05使用vue制作FullPage頁(yè)面滾動(dòng)效果
本篇文章主要介紹了使用vue制作FullPage頁(yè)面滾動(dòng)效果,詳細(xì)的介紹了FullPage頁(yè)面的思路和實(shí)現(xiàn),有興趣的可以了解一下2017-08-08vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07