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

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

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

可能有的小伙伴就會(huì)說了不是還有jQuery么？沒錯(cuò)jQuery也可以實(shí)現(xiàn)，但是使用jQuery實(shí)現(xiàn)的話一定需要直接對(duì)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>個(gè)人設(shè)置</div>      <div>賬戶中心</div>      <div>退出登錄</div> </div> </template>  //@mouseover、@mouseout和 v-show="person_con" 用來控制懸浮出現(xiàn)和消失的效果

js部分代碼如下所示：

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

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

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