vue二級菜單導(dǎo)航點擊選中事件的方法
更新時間：2018年09月12日 09:02:17 作者：天空影
今天小編就為大家分享一篇vue二級菜單導(dǎo)航點擊選中事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
因為沒有使用vue做一個真正完整的項目，所以乘著這個項目比較閑的時間，對標(biāo)項目用vue做一些頁面，豐富自己的項目經(jīng)驗。所以接下來基本都是一些簡單的功能。
目標(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二級菜單導(dǎo)航點擊選中事件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue內(nèi)置組件keep-alive事件動態(tài)緩存實例
這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue在取對象長度length時候出現(xiàn)undefined的解決
這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
用vite搭建vue3應(yīng)用的實現(xiàn)方法
這篇文章主要介紹了用vite搭建vue3應(yīng)用的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了Vue按回車鍵進(jìn)行搜索的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了初步認(rèn)識理解Vuex，Vuex就是在一個項目中，提供唯一的管理數(shù)據(jù)源的倉庫,有興趣的可以了解一下2017-04-04
Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)
這篇文章主要介紹了Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在vue中使用export?default導(dǎo)出的class類方式
這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文通過基本實例給大家介紹了vue計算屬性和監(jiān)聽器的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了通過html文件來使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
當(dāng)容器有滾動條時,有時需要將指定的內(nèi)容自動滾動到可視區(qū)域,怎么實現(xiàn)呢,下面小編給大家?guī)砹硕喾N方法實現(xiàn)Vue滾動到指定位置,感興趣的朋友跟隨小編一起看看吧2023-08-08