Html 在鼠标上显示子菜单输入Vuejs

对不起，我对这一切都不熟悉。 我正在尝试在菜单项鼠标悬停期间显示子菜单。我得到了关于记录菜单项索引和记录用户当前是否将鼠标放在顶部菜单的导航容器上的布尔值的提示。但是，我不知道如何继续使用这些为子菜单创建条件渲染。以下是我尝试过的：

HTML:

---

有人能帮我吗？谢谢大家!

Javascript部分应该可以做到这一点，您只需要稍微调整一下模板就可以实际呈现子菜单。以下是您如何做到这一点：

var vueinst=新的Vue{ 艾尔：维曼， 数据：{ topmenuitem:-1， 托普梅努霍弗：错， 顶部菜单：[ {标题：主页，url:/，子菜单：[]}， { 标题：关于， url:/about， 子菜单：[ {标题：我们是谁，url:/aboutus}， {title:What-we-do，url:/aboutstore}， {title:Our range，url:/aboutrange}， ], }, { 标题：联系我们， url:/contact， 子菜单：[ {title:Information，url:/contactinfo}， {title:Returns，url:/contactreturn}， {title:Locate Us，url:/contactlocate}， ], }, ], }, 方法：{ mouseOver：函数索引{ this.topmenuitem=索引； }, mouseOverNav：函数{ this.topmenuhover=true； }, mouseLeaveNav：功能{ this.topmenuhover=false； }, }, };

<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
            <ul id="topmenu" class="pure-menu-list">
                <li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
                <a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
                </li>
            </ul>
            <div class="pure-menu">
                <ul id="submenu" class="pure-menu-list">
                    <li v-if= "topmenuhover == true" class="pure-menu-item">
                    <a v-bind:href="topmenu[topmenuitem].submenus.url" class="pure-menu-link">{{ topmenu[topmenuitem].submenus.title }}</a></li>
                </ul>
            </div>
</nav>
</div>

var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : -1,
topmenuhover : false,
topmenu: [
    { title:'Home', url:'/', submenus: [] },
    { title:'About', url:'/about', 
        submenus: [
            { title:'Who we are',   url:'/about#us' },
            { title:'What we do',   url:'/about#store' },
            { title:'Our range',     url:'/about#range' }
        ]
    },
    { title:'Contact Us',   url:'/contact', 
        submenus: [
            { title:'Information',   url:'/contact#info' },
            { title:'Returns',   url:'/contact#return' },
            { title:'Locate Us',     url:'/contact#locate' }
        ]
    }
    ]
},
methods: {
mouseOver: function(index){
    this.topmenuitem=index;
},
mouseOverNav: function(){
  this.topmenuhover = true;
},
mouseLeaveNav: function(){
  this.topmenuhover = false;
}
}
});