Vue实现鼠标悬浮切换图片src Vue实现鼠标悬浮切换图片src

【Vue实现鼠标悬浮切换图片src】本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码，供大家参考，具体内容如下
需求：
1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮
2. 鼠标离开图示按钮，图片切换成回白色按钮

文章图片

Html部分：

文章图片
保存模板
文章图片
删除选中行
文章图片
清空当前表格

Js部分：

// 在data中先定义图片的初始srcsaveTemplateSrc: 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 = https://www.it610.com/article/require(`@/assets/dataBrowser/saveTemplate${tempStr}.png`)breakcase 2:this.deleteSelectStockSrc = require(`@/assets/dataBrowser/deleteSelectedRow${tempStr}.png`)breakcase 3:this.deleteTableDataSrc = require(`@/assets/dataBrowser/clearCurrentList${tempStr}.png`)break}}

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