vue如何實現鼠標移過出現下拉二級菜單功能

小編給大家分享一下vue如何實現鼠標移過出現下拉二級菜單功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1.我曾經聽一位快十年前端大佬說過一句話,就是能用css實現的動畫，就用css不要用js去實現 因為在渲染上css肯定比js效果更好 

我用jquery曾經實現過鼠標點擊 出現下拉菜單 有點和面包屑 和標簽頁導航類似  后來參加工作了 公司一直在用vue 所以很多用jqeury寫的項目都要用vue來重構 這其中不免碰見了有一些動畫效果 雖然很簡單 

我也曾想著就用jquery去實現吧 代碼多一點無所謂了 但最后卻不是這樣 vue好像和jquery中的有些插件沖突了  只要vue已導入 那些用jquery實現的動畫 就不能用 但又不能不用vue 沒辦法 這些效果只能用vue來實現了

vue官方提供了一種動畫效果 是 transition  下面是vue官方的經典例子

vue監聽的元素 一旦從dom樹 發生類似 刪除 重新創建  =》 removeElement  createElement   display:block;  display:none;

對應 vue中的 v-if   和 v-show  就可以算是觸發一種動畫效果  從用戶角度來說都是 上面倆種情況都是從無到有的出現在界面上 

.fade-enter-active, .fade-leave-active {   //定義元素 進入頁面時和離開頁面時的 效果
     transition: opacity .5s;    // 設置透明度默認是1 1是不透明 0是全透明 全透明相當于消失在頁面上 transition css3的過度效果
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    //設置元素進入 前和離開后都是純透明狀態 
 }

// 設置一個按鈕 通過v-show 控制元素的顯示隱藏

<div id="demo">
     <button v-on:click="show = !show">
      Toggle
     </button>

    <transition name="fade">   // <transition name="fade"></transition> 這個是必須的  
        <p v-if="show">hello</p>  //這里的name 和css樣式中的那個 fade也是一致的 讓p元素display block和node之間切換
     </transition>
 </div>

var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:false   //vue實例 定義一個變量
    }
  })

上面的這個例子算是 vue中經典的例子了 如果你不想寫 樣式的話 你可以結合第三方插件庫  也可以快速實現vue中的動畫效果

我這里用的是 animate.css動畫庫

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">  //cdn

<div>
     <button @click="show = !show">
      點擊
     </button>
     <transition
      name="custom-classes-transition"                    //使用 animate.css 雖然只是寫個類名 但前面不要忘記寫
      enter-active-class="animated slideInDown"           //animated 再寫 你要運用的動畫名稱
      leave-active-class="animated slideInUp"
     >
      <p v-if="show">hello</p>
     </transition>
    </div>

vue實例和上面的一模一樣就不寫了   下面 我附上 animate.css的地址

https://daneden.github.io/animate.css/

3.其實吧 在工作中 你可能就實現一個小動畫 好像沒必要引進那么大的animate插件庫  我在工作中就用的方法1  除非你的項目要大量用到動畫 并且需要不同的表現效果 那還是推薦使用插件庫  

下面 我說我的實際工作怎么解決的

我要實現一個鼠標移過出現下拉菜單 

.fade-enter-active, .fade-leave-active {   
     transition: opacity .5s;   
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    
 }

// 這里是鼠標移動過給show 賦值每一個遍歷li的下標   離開賦值給-1 

// 童鞋們知道為啥賦值成-1嗎 因為之前我賦值給false 發現下標是0的時候跟false是相等的  這個算是疏忽了 

//這樣就實現了 鼠標移動過 不同的li會出現當前li下的的下拉菜單   動畫 經理也沒說非要拿嗎高級 所以沒有在寫出什么復雜的動畫說實話 本人實力暫時也不是很強  哈哈     這里的i和show 都是變量 所以可以直接在@mouseover事件中使用  很多童鞋可能忘記了這種用法 只知道  事件后面一定要綁定方法 其實給變量賦值 也是可以的

<li class="nLi" v-for="(v,i) of itemList" @mouseover="show=i" @mouseout="show=-1">

                  <h4><a href="">企業文化</a>|</h4>

                  <transition name="fade">

                    <div class="sub" v-show="show==i">

                        <ul>

                          <li><a href="">公司理念</a></li> 

                          <li><a href="">發展戰略</a></li>

                         <li><a href="">發展歷程</a></li>

                     </ul>

               </div>

        </transition>

  </li> 

var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:-1   //vue實例 定義一個變量
    }
  })

好了 這個算是今天的一個小收獲  到此結束 我會持續更新把碰見的問題 共享出來 讓很多童鞋少走彎路  本人一直在向大牛的路上努力前進著

以上是“vue如何實現鼠標移過出現下拉二級菜單功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！