Vue中 前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片

1、需求导入

在某个需求下，需要鼠标移入时是A背景图，移出时是B背景图。（针对于Vue项目），如果是普通的HTML页面可直接在js中获取dom元素去修改style等方式实现，在Vue中，需要先将图片导入，将图片声明为一个变量。

2、具体实现过程

实现前.png

如截图所示，我们要改变的是红圈标记的两个图片，当鼠标移入部分时，将那块的image替换为UI给的图片。

2.1、先导入图片，声明为一个变量

这里也可以用require去获取

let edit = require("@/assets/editor.png")

也可以使用import导入再去data中去赋值给变量

import edit from "@/assets/editor.png";
import del from "@/assets/delete.png";
import activeEdit from "@/assets/editor_blue.png";
import activeDel from "@/assets/delete_red.png";

下面就是赋值给到变量中去

data() {
    return {
      editUrl: edit, // 编辑时的图片变量
      delUrl: del,  // 删除时的图片变量
    };
  },

3、开始添加事件进行处理

3.1、事件处理

    //移入编辑
    mouseEdit() {
      this.editUrl = activeEdit; // 替换为编辑激活图片
      this.delUrl = del;
    },
    leaveEdit() {
      this.editUrl = edit;
    },
    //移入删除
    mouseDel() {
      this.editUrl = edit;
      this.delUrl = activeDel;  // 替换为删除激活的图片
    },
    leaveDel() {
      this.delUrl = del;
    },

4、效果展示

动态修改背景图.gif