欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法

 更新時(shí)間：2018年09月12日 09:02:17   作者：天空影  
今天小編就為大家分享一篇vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

因?yàn)闆](méi)有使用vue做一個(gè)真正完整的項(xiàng)目，所以乘著這個(gè)項(xiàng)目比較閑的時(shí)間，對(duì)標(biāo)項(xiàng)目用vue做一些頁(yè)面，豐富自己的項(xiàng)目經(jīng)驗(yàn)。所以接下來(lái)基本都是一些簡(jiǎn)單的功能。

目標(biāo)：一級(jí)導(dǎo)航點(diǎn)擊收縮展開(kāi)，二級(jí)導(dǎo)航點(diǎn)擊選中

源碼 主要是思路，具體的就不放了

<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: '號(hào)碼分析' },
       { 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二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論