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

 更新时间:2018年09月12日 09:02:17   作者:天空影  
今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

相关文章

  • vue中el-upload上传图片到七牛的示例代码

    vue中el-upload上传图片到七牛的示例代码

    这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单,需要从后台获取七牛token上传图片到七牛,具体示例代码大家跟随小编一起学习吧
    2018-10-10
  • vue项目如何修改title旁边的icon图片

    vue项目如何修改title旁边的icon图片

    这篇文章主要介绍了vue项目如何修改title旁边的icon图片,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue3中标签form插件的使用教程详解

    vue3中标签form插件的使用教程详解

    这篇文章主要为大家详细介绍了vue3中标签form插件的使用的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
    2024-01-01
  • Vue报错Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解决方案

    Vue报错Module build failed: Error: Node&nb

    这篇文章主要介绍了Vue报错Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解决方案,需要的朋友可以参考下
    2023-06-06
  • 使用Bootrap和Vue实现仿百度搜索功能

    使用Bootrap和Vue实现仿百度搜索功能

    这篇文章主要介绍了使用Bootrap和Vue实现仿百度搜索功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • vue el-tree 默认展开第一个节点的实现代码

    vue el-tree 默认展开第一个节点的实现代码

    这篇文章主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • vue3 el-upload单张图片回显、编辑、删除功能实现

    vue3 el-upload单张图片回显、编辑、删除功能实现

    这篇文章主要介绍了vue3 el-upload单张图片回显、编辑、删除功能实现,图片回显时隐藏上传区域,鼠标悬浮显示遮罩层进行编辑、删除操作,删除图片后显示上传区域,本文通过实例代码分享实现方法,感兴趣的朋友一起看看吧
    2023-12-12
  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    今天小编就为大家分享一篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-cli history模式实现tomcat部署报404的解决方式

    vue-cli history模式实现tomcat部署报404的解决方式

    这篇文章主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue实现轮播图的多种方式

    vue实现轮播图的多种方式

    这篇文章给大家介绍了vue实现轮播图的多种方式,文中给出了四种实现方式,并通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的朋友可以参考下
    2024-02-02

最新评论