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

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

需求：

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

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

保存模板
删除选中行
清空当前表格

// 在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
}
}

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