vue.js怎么实现二级下拉悬浮菜单

vue.js实现二级下拉悬浮菜单的方法：1、完成鼠标悬浮出现新的div的效果；2、实现鼠标经过个人头像到个人信息的div时个人信息的div不消失；3、添加中间变量，在cl_person_info()方法中利用这个变量进行判断即可。

本文操作环境：windows10系统、vue 2.5.2、thinkpad t480电脑。

在实际的开发项目中我们可能需要实现类似二级菜单的功能，如果我们想偷个懒，那么我们可以直接使用现有的Element UI框架。但是这种方法有个很大的缺点，我们只有明白了各个代码的意思才能够修改代码以完成想要的动态效果，所以我们不推荐使用这种方法。

可能有的小伙伴就会说了不是还有jQuery么？没错jQuery也可以实现，但是使用jQuery实现的话一定需要直接对DOM进行操作，代码比较复杂。

那么我们到底该使用哪种方式呢？为什么不去使用v-bind呢？说干就干，一起来看看吧！

首先完成鼠标悬浮出现新的div的效果

html部分代码如下：

<template> <div class="person_img" >     <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>  </div>  <div v-show="person_con" class="hidden_div" >      <div>{{userid}}</div>      <div>个人设置</div>      <div>账户中心</div>      <div>退出登录</div> </div> </template>  //@mouseover、@mouseout和 v-show="person_con" 用来控制悬浮出现和消失的效果

js部分代码如下所示：

<script> name:'',     data(){         return{             placeholder:'搜索课程',             token:'',//判断是否登录的参数，在加载主页时直接判断             person_con:false,             userid:'',         }     },      methods:{      person_info(){         this.person_con = true;     },     		      cl_person_info(){          this.person_con = false;     },          } </script>

很简单，这样就实现了鼠标经过个人头像（person_img）时，下面会出现个人信息person_con。

下面是关键，怎么实现鼠标经过个人头像到个人信息的div时个人信息的div不消失，继而进行