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中复制行和删除行的操作实例
Jun 25 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jquery插件格式实例分析
Jun 16 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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实现图片简单上传
2006/10/09 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
浅析php工厂模式
2014/11/25 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
Python解析json文件相关知识学习
2016/03/01 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
《雾凇》教学反思
2014/02/17 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
培训通知书模板
2015/04/17 职场文书
教师素质教育心得体会
2016/01/19 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题