Vue如何实现鼠标悬浮切换图片

这篇"Vue如何实现鼠标悬浮切换图片"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"Vue如何实现鼠标悬浮切换图片"文章吧。

需求：

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 = 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  }}

以上就是关于"Vue如何实现鼠标悬浮切换图片"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。