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

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

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

可能有的小伙伴就會說了不是還有jQuery么？沒錯jQuery也可以實(shí)現(xiàn)，但是使用jQuery實(shí)現(xiàn)的話一定需要直接對DOM進(jìn)行操作，代碼比較復(fù)雜。

那么我們到底該使用哪種方式呢？為什么不去使用v-bind呢？說干就干，一起來看看吧！

首先完成鼠標(biāo)懸浮出現(xiàn)新的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>個人設(shè)置</div>      <div>賬戶中心</div>      <div>退出登錄</div> </div> </template>  //@mouseover、@mouseout和 v-show="person_con" 用來控制懸浮出現(xiàn)和消失的效果

js部分代碼如下所示：

<script> name:'',     data(){         return{             placeholder:'搜索課程',             token:'',//判斷是否登錄的參數(shù)，在加載主頁時直接判斷             person_con:false,             userid:'',         }     },      methods:{      person_info(){         this.person_con = true;     },     		      cl_person_info(){          this.person_con = false;     },          } </script>

很簡單，這樣就實(shí)現(xiàn)了鼠標(biāo)經(jīng)過個人頭像（person_img）時，下面會出現(xiàn)個人信息person_con。

下面是關(guān)鍵，怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過個人頭像到個人信息的div時個人信息的div不消失，繼而進(jìn)行