荣誉就像河流：轻浮的和空虚的荣誉浮在河面上，沉重的和厚实的荣誉沉在河底里。雨会停，心会晴，没有什么会永远糟糕透顶。
本文实例为大家分享了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"
:rel="nofollow noopener noreferrer" 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"
:rel="nofollow noopener noreferrer" 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组件学习好代码教程进行学习。
以上就是vue如何实现二级导航栏效果。男人多情而不专一，女人专一而绝情。更多关于vue如何实现二级导航栏效果请关注haodaima.com其它相关文章！
