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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
深入学习JavaScript 高阶函数
Jun 11 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
python转换摩斯密码示例
2014/02/16 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
用python实现的线程池实例代码
2018/01/06 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
.NET面试题:什么是反射
2016/09/30 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
擅自离岗检讨书
2014/02/11 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
信访维稳承诺书
2015/05/04 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
公司周年庆典致辞
2015/07/30 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python