快捷導(dǎo)航

詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法

更新時(shí)間：2020年04月07日 11:29:06 作者：錢(qián)不多啊

這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近在項(xiàng)目中實(shí)現(xiàn)在循環(huán)出來(lái)的圖片中當(dāng)鼠標(biāo)移入隱藏當(dāng)前圖片顯示另一張圖片的需求時(shí)碰到了一個(gè)小問(wèn)題。就是當(dāng)使用@mouseenter 和@mouseleave事件來(lái)實(shí)現(xiàn)這個(gè)需求時(shí)卻發(fā)現(xiàn)鼠標(biāo)移入后圖片出現(xiàn)閃爍現(xiàn)象。

重點(diǎn)：事件寫(xiě)到父元素上才行?。。?0.0

下面寫(xiě)下我的實(shí)現(xiàn)方法和實(shí)現(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)離開(kāi)');
		  this.show = true;
		  this.n = index;
		},
	}    
}

最終實(shí)現(xiàn)效果如圖當(dāng)鼠標(biāo)移入圖片時(shí)當(dāng)前圖片顯示查看詳情：

到此這篇關(guān)于詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法的文章就介紹到這了,更多相關(guān)vue @mouseenter @mouseleave事件閃爍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

深入理解Vue2.x的虛擬DOM diff原理
本篇文章主要介紹了Vue2.x的虛擬DOM diff原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
vue2路由表中異步加載組件命名方式
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue OptionsAPI與CompositionAPI的區(qū)別與使用介紹
OptionsAPI和CompositionAPI是Vue.js框架中兩種不同的組件編寫(xiě)方式,OptionsAPI通過(guò)對(duì)象字面量定義組件,以屬性分隔不同功能,響應(yīng)式數(shù)據(jù)通過(guò)data屬性定義,本文給大家介紹Vue OptionsAPI與CompositionAPI的區(qū)別,感興趣的朋友一起看看吧
2024-10-10
Vue?中駝峰命名與短橫線分割命名的用法及區(qū)別
在?Vue?中，命名規(guī)范是一個(gè)非常重要的話題，駝峰命名和短橫線分割命名都有其各自的優(yōu)缺點(diǎn)和適用場(chǎng)景，開(kāi)發(fā)者需要根據(jù)實(shí)際情況進(jìn)行選擇，這篇文章主要介紹了Vue?中駝峰命名與短橫線分割命名作用及區(qū)別介紹,需要的朋友可以參考下
2023-05-05
vue寫(xiě)h5頁(yè)面的方法總結(jié)
在本篇內(nèi)容里小編給大家整理了關(guān)于vue寫(xiě)h5頁(yè)面的方法以及注意點(diǎn)分析，有需要的朋友們跟著學(xué)習(xí)下吧。
2019-02-02
vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法
這篇文章主要介紹了vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
解決ant-design-vue安裝報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決ant-design-vue安裝報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue el-upload 上傳文件格式校驗(yàn)方法
這篇文章主要介紹了vue el-upload 上傳文件格式校驗(yàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-11-11
Vue+Echarts實(shí)現(xiàn)柱狀折線圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)柱狀折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04