简单介绍Vue实现鼠标悬浮切换图片src

305次阅读

共计 882 个字符，预计需要花费 3 分钟才能阅读完成。

导读	这篇文章主要为大家详细介绍了 Vue 实现鼠标悬浮切换图片 src，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了 Vue 实现鼠标悬浮切换图片 src 的具体代码，供大家参考，具体内容如下

需求：

1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮

2. 鼠标离开图示按钮，图片切换成回白色按钮

简单介绍 Vue 实现鼠标悬浮切换图片 src

Html 部分：

 保存模板


  
  删除选中行


  
  清空当前表格

Js 部分：

// 在 data 中先定义图片的初始 src
saveTemplateSrc: require("@/assets/dataBrowser/saveTemplate.png"),
deleteSelectStockSrc: require("@/assets/dataBrowser/deleteSelectedRow.png"),
deleteTableDataSrc: require("@/assets/dataBrowser/clearCurrentList.png")
  
// 在 methods 中绑定鼠标悬浮事件
changeImageSrc (key, way) {
  let tempStr = way === 'hover' ? 'Hover' : ''
  switch (key) {
    case 1:
      this.saveTemplateSrc = require(`@/assets/dataBrowser/saveTemplate${tempStr}.png`)
      break
    case 2:
      this.deleteSelectStockSrc = require(`@/assets/dataBrowser/deleteSelectedRow${tempStr}.png`)
      break
    case 3:
      this.deleteTableDataSrc = require(`@/assets/dataBrowser/clearCurrentList${tempStr}.png`)
      break
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助。