当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue二级菜单导航点击选中事件的方法

vue二级菜单导航点击选中事件的方法

2019年06月03日  | 移动技术网IT编程  | 我要评论

火柴人强尼2,fob论坛,召唤苍穹

因为没有使用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二级菜单导航点击选中事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网