vue二級菜單導航點擊選中事件的方法
更新時間:2018年09月12日 09:02:17 作者:天空影
今天小編就為大家分享一篇vue二級菜單導航點擊選中事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
因為沒有使用vue做一個真正完整的項目,所以乘著這個項目比較閑的時間,對標項目用vue做一些頁面,豐富自己的項目經(jīng)驗。所以接下來基本都是一些簡單的功能。
目標:一級導航點擊收縮展開,二級導航點擊選中
源碼 主要是思路,具體的就不放了
<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二級菜單導航點擊選中事件的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue在取對象長度length時候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)
這篇文章主要介紹了Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03在vue中使用export?default導出的class類方式
這篇文章主要介紹了在vue中使用export?default導出的class類方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03