详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
更新时间：2020年04月07日 11:29:06 作者：钱不多啊
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@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事件闪烁内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了Vue2.x的虚拟DOM diff原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue2路由表中异步加载组件命名方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
Vue OptionsAPI与CompositionAPI的区别与使用介绍
OptionsAPI和CompositionAPI是Vue.js框架中两种不同的组件编写方式,OptionsAPI通过对象字面量定义组件,以属性分隔不同功能,响应式数据通过data属性定义,本文给大家介绍Vue OptionsAPI与CompositionAPI的区别,感兴趣的朋友一起看看吧2024-10-10
在 Vue 中，命名规范是一个非常重要的话题，驼峰命名和短横线分割命名都有其各自的优缺点和适用场景，开发者需要根据实际情况进行选择，这篇文章主要介绍了Vue 中驼峰命名与短横线分割命名作用及区别介绍,需要的朋友可以参考下2023-05-05
在本篇内容里小编给大家整理了关于vue写h5页面的方法以及注意点分析，有需要的朋友们跟着学习下吧。2019-02-02
这篇文章主要介绍了vue 动态创建组件的两种方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
vue自定义指令添加跟随鼠标光标提示框v-tooltip方式
这篇文章主要介绍了vue自定义指令添加跟随鼠标光标提示框v-tooltip方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了解决ant-design-vue安装报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue el-upload 上传文件格式校验方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vue+Echarts实现柱状折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论