vue中在迴圈中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
阿新 • • 發佈:2020-12-01
vue移入移出事件,有可能新版本已經移除,做個記錄
ue中在迴圈中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
最近在專案中實現在迴圈出來的圖片中當滑鼠移入隱藏當前圖片顯示另一張圖片的需求時碰到了一個小問題。就是當使用@mouseenter 和@mouseleave事件來實現這個需求時卻發現滑鼠移入後圖片出現閃爍現象。
<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; }, } }