vue.js实现滑过图片显示删除图标,多个图片时怎么控制?

用vue.js实现滑过图片显示删除图标的功能,如图:
图片描述

代码如下

HTML:
图片描述

CSS:
图片描述
JS:
数据
图片描述

显示和隐藏方法图片描述

用isShowBorder来控制边框效果,seen来控制按钮效果

但当有多张图片时,每次滑过其中一张图片所有图片都会显示删除按钮和边框,求教要用什么方法怎么改才可以解决这个问题,谢谢!

阅读 8.5k
4 个回答

谢邀,每个图片加一个key,划过图片时判断当前key 与鼠标悬浮所在图片的key相等时才显示删除和边框

你的两个图片是在同一个vue实例里的,所以showDelete执行时,this指向的是同一个对象

有删除这个需求,应该是要根据数据生成图片列表,建议把图片项封装成component,这样每一个图片的this会指向自身component的实例

了解一下排它思想

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题