小編給大家分享一下vue.js如何實(shí)現(xiàn)二級(jí)下拉懸浮菜單，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、平遙網(wǎng)站維護(hù)、網(wǎng)站推廣。

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部分代碼如下：

//@mouseover、@mouseout和 v-show="person_con" 用來控制懸浮出現(xiàn)和消失的效果

js部分代碼如下所示：

很簡(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)行更多的業(yè)務(wù)操作呢？

自然的想法就是給再給person_con加上@mouseover和@mouseout。

接著實(shí)現(xiàn)鼠標(biāo)經(jīng)過個(gè)人頭像到個(gè)人信息的div時(shí)個(gè)人信息的div不消失

html部分代碼如下：

js部分代碼如下：

到此，還不能實(shí)現(xiàn)完整的功能，因?yàn)楝F(xiàn)在代碼還不完善。為啥？因?yàn)樵谑髽?biāo)移出個(gè)人頭像時(shí)，person_con又變?yōu)閒alse了，這就導(dǎo)致person_infoContinue()和 cl_person_infoContinue()其實(shí)是不起效果的。那又該怎么辦呢？自然的想法就是再添加一個(gè)中間變量，在cl_person_info()方法中，我利用這個(gè)變量進(jìn)行判斷。

js部分代碼如下：

到此，就利用簡(jiǎn)單的邏輯判斷true和false完成了懸浮二級(jí)菜單的功能。

看完了這篇文章，相信你對(duì)“vue.js如何實(shí)現(xiàn)二級(jí)下拉懸浮菜單”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！