vue实现二级导航栏效果


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了vue实现二级导航栏效果展示的具体代码,供大家参考,具体内容如下

实现如下功能:

vue实现二级导航栏效果

在.vue文件中,template中的内容如下:

<template>
 <div id="app">
 <nav class="sidebar">
 <ul class="menu">
 <li v-for="(navList,index) in navLists"
  :key="index"
  class="forRealitive"
  v-on:mouseover="showToggle(index)"
  v-on:mouseout="handleHide"
 >
  <a class="sidebar-link" 
  :href="navList.eTitle" " 
  >{{navList.title}}</a>
  <ul class="menu-sub"
  v-show="index===isShow">
  <li v-for="(item,idx) in navList.child" 
  :key="idx"
  >
  <a class="section-link" 
   :href="item.esubTitle" " 
   v-on:click="handleHide"
  >{{item.subTitle}}</a>
  </li>
  </ul>
 </li>
 </ul>
 </nav>
 </div>
</template>

其script标签中的数据格式:

navLists:[
 {
 'title':'项目信息',
 'eTitle':'#projectMessage',
 'child':[
 {
 'subTitle':'项目简介',
 'esubTitle':'#projectIntroduction'
 },
 {
 'subTitle':'样品信息',
 'esubTitle':'#sampleInformation'
 }
 ]
 },
 {
 ...
 }
 ...
]
isShow:0

函数部分:

mounted: function () {
 // 避免第一个渲染的显示
 this.isShow = -1
 },
 methods: {
 showToggle: function (index) {
 this.isShow = index
 },
 handleHide: function () {
 this.isShow = !this.isShow
 }
 }

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
javascript测试题练习代码
Oct 10 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
vue.js实现二级菜单效果
Oct 19 #Javascript
vue实现多级菜单效果
Oct 19 #Javascript
vue.js实现三级菜单效果
Oct 19 #Javascript
vue.js实现只能输入数字的输入框
Oct 19 #Javascript
Vue数字输入框组件的使用方法
Oct 19 #Javascript
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
Vue.js组件props数据验证实现详解
Oct 19 #Javascript
You might like
PHP 采集程序中常用的函数
2009/12/09 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
树结构之JavaScript
2017/01/24 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python类反射机制使用实例解析
2019/12/30 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
创业女性典型材料
2014/05/02 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
一级电子管军用接收机测评
2022/04/05 无线电
python神经网络Xception模型
2022/05/06 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL