vue实现导航栏,
这篇文章主要为大家详细介绍了某视频剪辑软件实现三级导航展示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现三级导航展示和隐藏的具体代码，供大家参考，具体内容如下
需求描述：
要实现侧边栏三级导航的显示和隐藏。点击其中一个一级导航，展示该一级导航的二级导航，再点击关闭该二级导航。一级导航的其他项，展开二级导航。关闭其他一级导航的二级导航。
效果如下：
代码：
模板
div id=应用程序
img alt=Vue logo src= ./assets/logo.png /
HelloWorld消息=欢迎使用您的vue . j应用/
导航列表中的div class=first v-for=(item，key):key= key
里
span @ click= handle click(key) { { item。title } }/span
差异
中的v-for=(item2，key2
:key=key2
class=秒
v-show=show2 currIndex==key
p @ click=第二次点击(key 2) { { item 2。subtitle } }/p
差异
item2.threeChild中的v-for=(item3，key3
:key=key3
三个
v-show=show3 currIndex2==key2
{{ item3.threeTitle }}
/div
/div
/李
/div
/div
/模板
脚本
从导入你好世界./components/hello world。vue ；
导出默认值{
名称："应用程序",
组件：{
HelloWorld，
},
data() {
返回{
i: 0，
表演3:错误，
表演2:错误，
导航列表：[
{
标题： 项目信息，
孩子：[
{
副标题： 项目简介，
esubTitle:“#项目介绍”，
三个孩子：[
{ threeTitle:三级导航 },
{ threeTitle:三级导航 },
{ threeTitle:三级导航 },
],
},
{
副标题： 样品信息，
三个孩子：[
{ threeTitle:三级导航22 },
{ threeTitle:三级导航22 },
{ threeTitle:三级导航22 },
],
},
{
副标题： 样品信息，
三个孩子：[
{ threeTitle:三级导航33 },
{ threeTitle:三级导航33 },
{ threeTitle:三级导航33 },
],
},
],
},
{
标题： 项目信息2,
孩子：[
{
副标题： 项目简介22,
三个孩子：[
{ threeTitle:三级导航44 },
{ threeTitle:三级导44 },
{ threeTitle:三级导航22 },
],
},
{
副标题： 样品信息22,
},
],
},
{
标题： 项目信息3,
标题：" #projectMessage "，
孩子：[
{
副标题： 项目简介33,
esubTitle:“#项目介绍”，
},
{
副标题： 样品信息33,
esubTitle:"#样品信息"，
},
],
},
{
标题： 项目信息2,
孩子：[
{
副标题： 项目简介22,
},
{
副标题： 样品信息22,
},
],
},
{
标题： 项目信息3,
孩子：[
{
副标题： 项目简介33,
},
{
副标题： 样品信息33,
},
],
},
],
currIndex: ，//当前索引
spanIndex: []，//索引数组
arrIndex: ，//用于判断是否做索引数组找到当前索引。-1为找不到，0找到了。
currIndex2: ，//二级导航当前索引
spanIndex2: []，//索引数组
arrIndex2: ，//用于判断是否做索引数组找到当前索引。-1为找不到，0找到了。
};
},
方法：{
手柄点击（索引){
//初始化三级导航，默认不显示。
this.show3=false
this.spanIndex2.splice(-1，1)；
//当前索引=索引
this.currIndex=index
console.log(当前索引索引，索引);
//判断当前索引是否在索引数组西班牙指数中100 .数组索引的值只有两种结果，-1未找到。0找到了。
这个。arrindex=this。西班牙指数。索引(index)；
console.log(arrIndex ，this。arrIndex)；
if (this.arrIndex==0) {
//arrIndex==0，找到索引了，在索引数组西班牙指数删除该索引，隐藏二级导航。
这个。跨度指数。拼接(这个。arr索引，1)；
this.show2=false
}否则{
//arrIndex==-1，没有找到，拼接(-1,1)从西班牙指数数组结尾处删除一个值，并将当前索引添加到索引数组spanIndex，显示2为没错，展示二级导航，
这个。跨度指数。拼接(这个。arr索引，1)；
这个。西班牙指数。推送(索引)；
this.show2=true
}
console.log(索引数组，这个。spanindex)；
},
第二次点击(索引){
console.log(索引);
//当前索引=索引
this.currIndex2=index
//判断当前索引是否在索引数组西班牙指数中100 .数组索引的值只有两种结果，-1未找到。0找到了。
这个。arrindex 2=这个。spanindex 2。索引(index)；
console.log(arrIndex2 ，this。arrindex 2)；
if (this.arrIndex2==0) {
//arrIndex==0，找到索引了，在索引数组西班牙指数删除该索引，隐藏二级导航。
这个。spanindex 2。拼接(这个。arrindex 2，1)；
this.show3=false
}否则{
//arrIndex==-1，没有找到，拼接(-1,1)从西班牙指数数组结尾处删除一个值，并将当前索引添加到索引数组spanIndex，显示2为没错，展示二级导航，
这个。spanindex 2。拼接(这个。arrindex 2，1)；
这个。spanindex 2。推送(索引)；
this.show3=true
}
console.log(索引数组2 ，这个。spanindex 2)；
},
},
};
/脚本
风格
p {
填充：5px 0；
margin-block-start:0；
边距-块-结束：0;
}
#app {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}。首先{
宽度：200像素
字体大小：24px
字体粗细：粗体；
/*高度：60px*/
/*背景：红色；*/
}。第一：悬停{
光标：指针；
/*颜色：红色；*/
}。第二个{
字体大小：18px
字体粗细：正常；
背景：# eee
左边距：50px
}。三个
背景：黄色；
左边距：20px
字体大小：14px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。