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


Posted in Javascript onSeptember 12, 2018

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

Javascript 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
javascript类型转换示例
Apr 29 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
javascript冒泡排序小结
Apr 10 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
vue this.reload 方法 配置
Sep 12 #Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
JS中判断字符串存在和非空的方法
Sep 12 #Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 #Javascript
微信小程序实现tab左右切换效果
Nov 15 #Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 #Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php中的观察者模式
2010/03/24 PHP
php获取域名的google收录示例
2014/03/24 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
jQuery 操作XML入门
2008/12/25 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
原生js实现自定义消息提示框
2020/11/19 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python的Lambda函数用法详解
2019/09/03 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
12.4法制宣传日活动总结
2014/08/26 职场文书
客房部经理岗位职责
2015/02/02 职场文书
《游戏公平》教学反思
2016/02/20 职场文书