vue.js實現二級下拉懸浮菜單的方法：1、完成鼠標懸浮出現新的div的效果；2、實現鼠標經過個人頭像到個人信息的div時個人信息的div不消失；3、添加中間變量，在cl_person_info()方法中利用這個變量進行判斷即可。

本文操作環(huán)境：windows10系統(tǒng)、vue 2.5.2、thinkpad t480電腦。

在實際的開發(fā)項目中我們可能需要實現類似二級菜單的功能，如果我們想偷個懶，那么我們可以直接使用現有的Element UI框架。但是這種方法有個很大的缺點，我們只有明白了各個代碼的意思才能夠修改代碼以完成想要的動態(tài)效果，所以我們不推薦使用這種方法。

可能有的小伙伴就會說了不是還有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不消失，繼而進行