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 Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
浅谈JavaScript字符集
May 22 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Element中Slider滑块的具体使用
Jul 29 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
JavaScript中的Math 使用介绍
2014/04/21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python接口测试get请求过程详解
2020/02/28 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
电焊工岗位职责
2014/03/06 职场文书
安全生产标语大全
2014/10/06 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android