您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue二級菜單導(dǎo)航點擊選中事件如何實現(xiàn)”,在日常操作中,相信很多人在vue二級菜單導(dǎo)航點擊選中事件如何實現(xiàn)問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue二級菜單導(dǎo)航點擊選中事件如何實現(xiàn)”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
目標(biāo):一級導(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是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
到此,關(guān)于“vue二級菜單導(dǎo)航點擊選中事件如何實現(xiàn)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。