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组件学习教程进行学习。

以上是 vue实现二级导航栏效果 的全部内容, 来源链接: utcz.com/z/336160.html

回到顶部