你瞧，你绿油油的小草从土里钻了出来。嫩嫩的，它在饱受严冬的考验之后，在严冬它聚集着力量，想在春天到来时，将力量释放出来，它展示出了生命力的顽强，也展现出自己对春天的渴望！在万物最需要水的时候，春雨悄悄地轻轻地到来了。生怕踩到了这些顽强的小精西。春雨打在小草的脸上，轻轻地。小草贪婪的吮吸着春雨，一会儿，春风也来 "凑热闹 "了，春风来为柳树 "梳头 "来了，春风也轻轻地，怕自己的鲁莽把柳树的头发弄断了。
最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象。
重点：事件写到父元素上才行！！！ 0.0
下面写下我的实现方法和实现效果
样式代码：
<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;
},
}
}
最终实现效果如图 当鼠标移入图片时当前图片显示查看详情：
到此这篇关于详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法的文章就介绍到这了,更多相关vue @mouseenter @mouseleave事件闪烁内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
