vue实现二级导航栏

RT：
想实现如下功能：

在.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
      }
    }