vue实现二级导航栏效果
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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组件的教程，请大家点击专题进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：Vue.js下拉菜单组件使用方法详解
下一篇：vue.js实现二级菜单效果