詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
更新時間：2020年04月07日 11:29:06 作者：錢不多啊
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
最近在項目中實現(xiàn)在循環(huán)出來的圖片中當鼠標移入隱藏當前圖片顯示另一張圖片的需求時碰到了一個小問題。就是當使用@mouseenter 和@mouseleave事件來實現(xiàn)這個需求時卻發(fā)現(xiàn)鼠標移入后圖片出現(xiàn)閃爍現(xiàn)象。
重點：事件寫到父元素上才行?。?！ 0.0
下面寫下我的實現(xiàn)方法和實現(xiàn)效果
樣式代碼：
<div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="enterFun(index)" @mouseleave ="leaveFun(index)" >
<img :src = item.url v-show="show || n != index" >
<div v-show="!show && n == index" >查看詳情</div>
</div>
其他代碼：
export default {
data () {
return {
n: 0,
show:true,
}
} ,
methods: {
enterFun(index){
console.log('鼠標移入');
this.show = false;
this.n = index;
},
leaveFun(index){
console.log('鼠標離開');
this.show = true;
this.n = index;
},
}
}
最終實現(xiàn)效果如圖 當鼠標移入圖片時當前圖片顯示查看詳情：
到此這篇關于詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法的文章就介紹到這了,更多相關vue @mouseenter @mouseleave事件閃爍內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了通過vue手動封裝on，emit，off的代碼詳解，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇vue將毫秒數(shù)轉化為正常日期格式的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在移動應用開發(fā)中,uniApp框架提供了一種跨平臺的解決方案,允許開發(fā)者使用一套代碼來構建iOS、Android等多平臺的應用,這篇文章主要給大家介紹了關于uniapp使用webview內嵌H5的注意事項,需要的朋友可以參考下2024-07-07
vue的過渡動畫，主要是transition標簽的使用，配合css動畫實現(xiàn)的。接下來通過本文給大家分享Vue運用transition實現(xiàn)過渡動畫效果，感興趣的朋友一起看看吧2019-05-05
v-cloak原理是先通過樣式隱藏內容,然后在內存中進行值的替換,將替換的內容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了vue-cli構建的項目如何手動添加eslint配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關于vxe-table復選框翻頁選中問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
基于Vue2.0和Typescript實現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實現(xiàn)多主題切換的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題（顯示變量）
這篇文章主要介紹了vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題（顯示變量） ,需要的朋友可以參考下2018-04-04