詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
更新時間：2020年04月07日 11:29:06 作者：錢不多啊
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近在項目中實現(xiàn)在循環(huán)出來的圖片中當(dāng)鼠標(biāo)移入隱藏當(dāng)前圖片顯示另一張圖片的需求時碰到了一個小問題。就是當(dāng)使用@mouseenter 和@mouseleave事件來實現(xiàn)這個需求時卻發(fā)現(xiàn)鼠標(biāo)移入后圖片出現(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('鼠標(biāo)移入');
this.show = false;
this.n = index;
},
leaveFun(index){
console.log('鼠標(biāo)離開');
this.show = true;
this.n = index;
},
}
}
最終實現(xiàn)效果如圖 當(dāng)鼠標(biāo)移入圖片時當(dāng)前圖片顯示查看詳情：
到此這篇關(guān)于詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法的文章就介紹到這了,更多相關(guān)vue @mouseenter @mouseleave事件閃爍內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue2.x的虛擬DOM diff原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue OptionsAPI與CompositionAPI的區(qū)別與使用介紹
OptionsAPI和CompositionAPI是Vue.js框架中兩種不同的組件編寫方式,OptionsAPI通過對象字面量定義組件,以屬性分隔不同功能,響應(yīng)式數(shù)據(jù)通過data屬性定義,本文給大家介紹Vue OptionsAPI與CompositionAPI的區(qū)別,感興趣的朋友一起看看吧2024-10-10
在?Vue?中，命名規(guī)范是一個非常重要的話題，駝峰命名和短橫線分割命名都有其各自的優(yōu)缺點和適用場景，開發(fā)者需要根據(jù)實際情況進(jìn)行選擇，這篇文章主要介紹了Vue?中駝峰命名與短橫線分割命名作用及區(qū)別介紹,需要的朋友可以參考下2023-05-05
在本篇內(nèi)容里小編給大家整理了關(guān)于vue寫h5頁面的方法以及注意點分析，有需要的朋友們跟著學(xué)習(xí)下吧。2019-02-02
這篇文章主要介紹了vue 動態(tài)創(chuàng)建組件的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了解決ant-design-vue安裝報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue el-upload 上傳文件格式校驗方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實現(xiàn)柱狀折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04