如何使用vue实现二级导航栏效果 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下如何使用vue实现二级导航栏效果,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

实现如下功能:

在。vue文件中,模板中的内容如下:

& lt; template> 　　,& lt; div id=癮pp"比; 　　,& lt; nav 类=皊idebar"比; 　　,& lt; ul 类=癿enu"比; 　　,& lt; li v=?navList、索引),拷贝navLists" 　　,,:关键=癷ndex" 　　类才能=癴orRealitive" 　　v:才能mouseover=皊howToggle(指数)“; 　　v:才能mouseout=癶andleHide" 　　,比; 　　& lt;才能a 类=皊idebar-link", 　　:href=https://www.yisu.com/zixun/才能“navList.eTitle”“> {{navList.title}} 　　　　<李v="(项目,idx) navList.child” 　　:关键=" idx "> 　　 {{item.subTitle}} 　　李　　　　李　　　　　　

其脚本标签中的数据格式:

navLists: [ 　　,{ 　　,& # 39;标题# 39;:& # 39;项目信息& # 39;, 　　,& # 39;eTitle& # 39;: & # 39; # projectMessage& # 39; 　　,& # 39;孩子# 39;:( 　　,{ 　　,& # 39;字幕# 39;:& # 39;项目简介& # 39;, 　　,& # 39;esubTitle& # 39;: & # 39; # projectIntroduction& # 39; 　　}, 　　,{ 　　,& # 39;字幕# 39;:& # 39;样品信息& # 39;, 　　,& # 39;esubTitle& # 39;: & # 39; # sampleInformation& # 39; 　　,} 　　,) 　　}, 　　,{ 　　,…… 　　,} 　　,…… 　　] 　　isShow: 0

函数部分:

安装:,function (), { 　　,//避免第一个渲染的显示　　this.isShow =, 1 　　}, 　　,方法:{ 　　,showToggle: function (指数),{ 　　this.isShow =,指数　　}, 　　,handleHide: function (), { 　　this.isShow =, ! this.isShow 　　,} 　　,}

看完了这篇文章,相信你对“如何使用vue实现二级导航栏效果”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!