vue实现二级导航栏效果

本文实例为大家分享了某视频剪辑软件实现二级导航栏效果展示的具体代码，供大家参考，具体内容如下

实现如下功能：

在。某视频剪辑软件文件中，模板中的内容如下：

模板div id='app' nav class='侧边栏ul class=' menu ' Li v-for=' nav list，index '在nav list ' : key=' index ' class=' for eal live ' v-: mouse over=' showToggle(index)' v-: mouse out=' handleHide ' a class='侧边栏-链接“:”导航列表。etitle ' ' { {导航列表。title } }/a ul class=' menu-sub '其脚本标签中的数据格式：

导航列表：[ { 'title': '项目信息，' eTitle':'#projectMessage '，' child ' :[{ ' TItle ' : '项目简介，' esubTitle ' : ' #项目介绍' }，{ '字幕' : '样品信息，' esubTitle ' : ' # sampleInformation ' }]}，{ 0.} .]isShow:0函数部分：

mounted: function () { //避免第一个渲染的显示这个。issshow=-1 }，methods: { showToggle:函数（索引){ this.isShow=index }，handleHide:函数(){这个。issshow=！this.isShow } }更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。