详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法


Posted in Javascript onApril 07, 2020

最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@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事件闪烁问题解决方法的文章就介绍到这了,更多相关vue @mouseenter @mouseleave事件闪烁内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 #Javascript
flexible.js实现移动端rem适配方案
Apr 07 #Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 #Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 #Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php日历制作代码分享
2014/01/20 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
python爬虫之urllib3的使用示例
2018/07/09 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
django 外键model的互相读取方法
2018/12/15 Python
Python os.access()用法实例
2019/02/18 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
pandas按条件筛选数据的实现
2021/02/20 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
高级护理实习生自荐信
2013/09/28 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
教师对学生的评语
2014/04/28 职场文书
博士生导师推荐信
2014/07/08 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
给校长的建议书作文400字
2015/09/14 职场文书