Vue 的v-bind實現二級下拉懸浮選單

專案中需要做出類似二級選單的功能，原本是想偷懶直接用現有的Element UI框架，但是發現雖然格式漂亮但是需要看明白各個程式碼的意思才能修改成自己想要的極其簡單的動態效果，果斷放棄。
然後想到Jquery，雖然可以實現，但是轉念一想肯定會需要直接對DOM進行操作。去百度了一下，果不其然，程式碼一大堆。我現在不是在用Vue麼，v-bind試一試？說做就做！

1.首先完成滑鼠懸浮出現新的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不消失，繼而進行更多的業務操作呢？
自然的想法就是給再給person_con加上@mouseover和@mouseout。

2.實現滑鼠經過個人頭像到個人資訊的div時個人資訊的div不消失

html部分程式碼如下：

<template>
<div class="person_img" >
    <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>
 </div>
 
//新增@mouseover和@mouseout
<div v-show="person_con" class="hidden_div" @mouseover="person_infoContinue()" @mouseout="cl_person_infoContinue()" >
     <div>{{userid}}</div>
     <div>個人設定</div>
     <div>賬戶中心</div>
     <div>退出登入</div>
</div>
</template>

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;
    },
    
    person_infoContinue(){
        this.person_con = true;
    },
    
    cl_person_infoContinue(){
        this.person_con = false;
    },
    }
</script>

到此，還不能實現完整的功能，因為現在程式碼還不完善。為啥？因為在滑鼠移出個人頭像時，person_con又變為false了，這就導致person_infoContinue()和 cl_person_infoContinue()其實是不起效果的。那又該怎麼辦呢？自然的想法就是再新增一箇中間變數，在cl_person_info()方法中，我利用這個變數進行判斷。
js部分程式碼如下

<script>
name:'',
    data(){
        return{
            placeholder:'搜尋課程',
            token:'',//判斷是否登入的引數，在載入主頁時直接判斷
            person_con:false,
            isperson_infoContinue:false,//增加
            userid:'',
        }
    },
     methods:{
     //不變
     person_info(){
        this.person_con = true;
    },
    //增加判斷
     cl_person_info(){ 
         if(this.isperson_infoContinue = true){
                this.person_con = true;
            }else{
                this.person_con = false;
            }
    },
    //滑鼠進入到新的div時讓中間變數為true
    person_infoContinue(){
        this.person_con = true;
        this.isperson_infoContinue = true;
    },
    
    cl_person_infoContinue(){
    	this.isperson_infoContinue = false;
        this.person_con = false;
    },
    }
</script>

到此，就利用簡單的邏輯判斷true和false完成了懸浮二級選單的功能。