详解vue中在循环中使用@mouseenter 和 @mouseleave事件
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象。
重点事件写到父元素上才行！！！ 0.0
狼蚁网站SEO优化写下我的实现方法和实现效果
样式代码
<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事件闪烁内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！