欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單功能

 更新時(shí)間:2019年12月12日 09:55:09   作者:yunchong_zhao  
這篇文章主要介紹了vue實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.我曾經(jīng)聽(tīng)一位快十年前端大佬說(shuō)過(guò)一句話,就是能用css實(shí)現(xiàn)的動(dòng)畫,就用css不要用js去實(shí)現(xiàn) 因?yàn)樵阡秩旧蟘ss肯定比js效果更好 

我用jquery曾經(jīng)實(shí)現(xiàn)過(guò)鼠標(biāo)點(diǎn)擊 出現(xiàn)下拉菜單 有點(diǎn)和面包屑 和標(biāo)簽頁(yè)導(dǎo)航類似  后來(lái)參加工作了 公司一直在用vue 所以很多用jqeury寫的項(xiàng)目都要用vue來(lái)重構(gòu) 這其中不免碰見(jiàn)了有一些動(dòng)畫效果 雖然很簡(jiǎn)單 

我也曾想著就用jquery去實(shí)現(xiàn)吧 代碼多一點(diǎn)無(wú)所謂了 但最后卻不是這樣 vue好像和jquery中的有些插件沖突了  只要vue已導(dǎo)入 那些用jquery實(shí)現(xiàn)的動(dòng)畫 就不能用 但又不能不用vue 沒(méi)辦法 這些效果只能用vue來(lái)實(shí)現(xiàn)了

vue官方提供了一種動(dòng)畫效果 是 transition  下面是vue官方的經(jīng)典例子

vue監(jiān)聽(tīng)的元素 一旦從dom樹(shù) 發(fā)生類似 刪除 重新創(chuàng)建  =》 removeElement  createElement   display:block;  display:none;

對(duì)應(yīng) vue中的 v-if   和 v-show  就可以算是觸發(fā)一種動(dòng)畫效果  從用戶角度來(lái)說(shuō)都是 上面?zhèn)z種情況都是從無(wú)到有的出現(xiàn)在界面上 

.fade-enter-active, .fade-leave-active {   //定義元素 進(jìn)入頁(yè)面時(shí)和離開(kāi)頁(yè)面時(shí)的 效果
     transition: opacity .5s;    // 設(shè)置透明度默認(rèn)是1 1是不透明 0是全透明 全透明相當(dāng)于消失在頁(yè)面上 transition css3的過(guò)度效果
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    //設(shè)置元素進(jìn)入 前和離開(kāi)后都是純透明狀態(tài) 
 }
// 設(shè)置一個(gè)按鈕 通過(guò)v-show 控制元素的顯示隱藏

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

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

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

上面的這個(gè)例子算是 vue中經(jīng)典的例子了 如果你不想寫 樣式的話 你可以結(jié)合第三方插件庫(kù)  也可以快速實(shí)現(xiàn)vue中的動(dòng)畫效果

我這里用的是 animate.css動(dòng)畫庫(kù)

<link  rel="stylesheet" type="text/css">  //cdn

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

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

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

3.其實(shí)吧 在工作中 你可能就實(shí)現(xiàn)一個(gè)小動(dòng)畫 好像沒(méi)必要引進(jìn)那么大的animate插件庫(kù)  我在工作中就用的方法1  除非你的項(xiàng)目要大量用到動(dòng)畫 并且需要不同的表現(xiàn)效果 那還是推薦使用插件庫(kù)  

下面 我說(shuō)我的實(shí)際工作怎么解決的

我要實(shí)現(xiàn)一個(gè)鼠標(biāo)移過(guò)出現(xiàn)下拉菜單 

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

// 這里是鼠標(biāo)移動(dòng)過(guò)給show 賦值每一個(gè)遍歷li的下標(biāo)   離開(kāi)賦值給-1 

// 童鞋們知道為啥賦值成-1嗎 因?yàn)橹拔屹x值給false 發(fā)現(xiàn)下標(biāo)是0的時(shí)候跟false是相等的  這個(gè)算是疏忽了 

//這樣就實(shí)現(xiàn)了 鼠標(biāo)移動(dòng)過(guò) 不同的li會(huì)出現(xiàn)當(dāng)前l(fā)i下的的下拉菜單   動(dòng)畫 經(jīng)理也沒(méi)說(shuō)非要拿嗎高級(jí) 所以沒(méi)有在寫出什么復(fù)雜的動(dòng)畫說(shuō)實(shí)話 本人實(shí)力暫時(shí)也不是很強(qiáng)  哈哈     這里的i和show 都是變量 所以可以直接在@mouseover事件中使用  很多童鞋可能忘記了這種用法 只知道  事件后面一定要綁定方法 其實(shí)給變量賦值 也是可以的

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

                  <h3><a href="">企業(yè)文化</a>|</h3>

                  <transition name="fade">

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

                        <ul>

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

                          <li><a href="">發(fā)展戰(zhàn)略</a></li>

                         <li><a href="">發(fā)展歷程</a></li>

                     </ul>

               </div>

        </transition>

  </li> 

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

好了 這個(gè)算是今天的一個(gè)小收獲  到此結(jié)束 我會(huì)持續(xù)更新把碰見(jiàn)的問(wèn)題 共享出來(lái) 讓很多童鞋少走彎路  本人一直在向大牛的路上努力前進(jìn)著

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • Vue3之事件綁定的實(shí)現(xiàn)邏輯詳解

    Vue3之事件綁定的實(shí)現(xiàn)邏輯詳解

    這篇文章主要介紹了Vue3之事件綁定的實(shí)現(xiàn)邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • VUE3中watch監(jiān)聽(tīng)使用實(shí)例詳解

    VUE3中watch監(jiān)聽(tīng)使用實(shí)例詳解

    watch函數(shù)用來(lái)偵聽(tīng)特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽(tīng)使用的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • 基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼

    基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼

    一個(gè)優(yōu)雅展示樹(shù)形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過(guò)獨(dú)特的樣式巧妙處理不同層級(jí),為用戶打造豐富的視覺(jué)盛宴,文中通過(guò)代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下
    2024-02-02
  • vue 動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法詳解

    vue 動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法詳解

    這篇文章主要為大家介紹了vue動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-12-12
  • Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)

    Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)

    在我們使用 vue時(shí),我們可以引用兩個(gè)不同版本的 Vue,分別是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它們的區(qū)別是什么呢,今天我們就來(lái)分析下這兩個(gè)不同版本之間的區(qū)別,一起看看吧
    2020-02-02
  • vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程

    vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程

    這篇文章主要介紹了vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程,本文給大家介紹如何使用electron-builder這個(gè)庫(kù)結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),感興趣的朋友一起看看吧
    2024-02-02
  • vue中組件間多種傳值方式案例詳解

    vue中組件間多種傳值方式案例詳解

    vue中每個(gè)組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼

    Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼

    這篇文章主要介紹了Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-06-06
  • 使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果附源碼

    使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果附源碼

    這篇文章主要介紹了使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • vue3中批量全局注冊(cè)組件實(shí)例詳解

    vue3中批量全局注冊(cè)組件實(shí)例詳解

    在vue中,我們?cè)趍ain.ts引入的全局注冊(cè)的組件是可以不需要import導(dǎo)入而直接使用的,使用的時(shí)候是自己全局注冊(cè)組件時(shí)的名稱,而不是組件名,這篇文章主要介紹了vue3中批量全局注冊(cè)組件,需要的朋友可以參考下
    2023-05-05

最新評(píng)論