因為沒有使用vue做一個真正完整的項目,所以乘著這個項目比較閑的時間,對標項目用vue做一些頁面,豐富自己的項目經驗。所以接下來基本都是一些簡單的功能。
目標:一級導航點擊收縮展開,二級導航點擊選中
源碼 主要是思路,具體的就不放了
<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二級菜單導航點擊選中事件的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答