vue二級菜單導(dǎo)航點擊選中事件的方法
更新時間：2018年09月12日 09:02:17 作者：天空影
今天小編就為大家分享一篇vue二級菜單導(dǎo)航點擊選中事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
因為沒有使用vue做一個真正完整的項目，所以乘著這個項目比較閑的時間，對標項目用vue做一些頁面，豐富自己的項目經(jīng)驗。所以接下來基本都是一些簡單的功能。
目標：一級導(dǎo)航點擊收縮展開，二級導(dǎo)航點擊選中
源碼 主要是思路，具體的就不放了
<ul class="sidebar-menu">
<li class="treeNav" v-for="(item,index) in configNav">
<a href="javascript:void(0)" rel="external nofollow" @click="showToggle(index)">{{item.name}}</a>
<ul :class="{'active' :index===isShow}">
<li v-for = "nav in item.subItems">
<a :href="nav.link" rel="external nofollow"
:class="{'active':nav.link == linkClick}"
@click = "treeNavSwitch(nav)">
{{nav.text}}</a>
</li>
</ul>
</li>
</ul>
<script>
export default {
data () {
return {
isShow:0,
linkClick:'',
configNav:[
{
name:'交換&路由',
subItems:[
{ link:'#/callSource',text: '呼叫源',click:true },
{ link:'#/cancld',text: '號碼分析' },
{ link:'#/route',text: '出局路由' }
]
},
{
name:'組織&資源',
subItems:[
{ link:'#/org',text: '組織' },
{ link:'#/term',text: '終端' },
]
}
]
}
},
methods:{
showToggle:function(index){
this.isShow = index;
},
treeNavSwitch:function(nav){
this.linkClick = nav.link;
}
}
}
</script>
以上這篇vue二級菜單導(dǎo)航點擊選中事件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實現(xiàn)思路其實也很簡單，需要從后臺獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧2018-10-10
這篇文章主要介紹了vue項目如何修改title旁邊的icon圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了vue3中標簽form插件的使用的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
Vue報錯Module build failed: Error: Node&nb
這篇文章主要介紹了Vue報錯Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解決方案,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了使用Bootrap和Vue實現(xiàn)仿百度搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
vue el-tree 默認展開第一個節(jié)點的實現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認展開第一個節(jié)點的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn)
這篇文章主要介紹了vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn),圖片回顯時隱藏上傳區(qū)域,鼠標懸浮顯示遮罩層進行編輯、刪除操作,刪除圖片后顯示上傳區(qū)域,本文通過實例代碼分享實現(xiàn)方法,感興趣的朋友一起看看吧2023-12-12
今天小編就為大家分享一篇vue 刷新之后 嵌套路由不變 重新渲染頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-cli history模式實現(xiàn)tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章給大家介紹了vue實現(xiàn)輪播圖的多種方式,文中給出了四種實現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-02-02