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

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

需求：

鼠标悬浮到图示按钮上面，图片切换成灰色按钮
2. 鼠标离开图示按钮，图片切换成回白色按钮

Html部分：

<!-- 如果此处的两个鼠标事件不生效，可以在mouseenter后面添加.native后缀 --><div class="left-btn"     @click="saveTemplate()"     @mouseenter="changeImageclass="lazy" data-src(1, 'hover')"     @mouseleave="changeImageclass="lazy" data-src(1, '')">  <img :class="lazy" data-src="saveTemplateclass="lazy" data-src"       class="left-btn-img"       alt="">  <span class="left-btn-text">保存模板</span></div><div class="left-btn"     @click="deleteSelectStock()"     @mouseenter="changeImageclass="lazy" data-src(2, 'hover')"     @mouseleave="changeImageclass="lazy" data-src(2, '')">  <img :class="lazy" data-src="deleteSelectStockclass="lazy" data-src"       class="left-btn-img"       alt="">  <span class="left-btn-text">删除选中行</span></div><div class="left-btn"     @click="deleteTableData()"     @mouseenter="changeImageclass="lazy" data-src(3, 'hover')"     @mouseleave="changeImageclass="lazy" data-src(3, '')">  <img :class="lazy" data-src="deleteTableDataclass="lazy" data-src"       class="left-btn-img"       alt="">  <span class="left-btn-text">清空当前表格</span></div>

Js部分：

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

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