小编给大家分享一下如何使用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实现二级导航栏效果”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。