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

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

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

这里也可以用require去获取

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

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

注意：本篇没有干货

ref有以下用法用法：

1、ref 加在普通的元素上，用thisrefname 获取到的是dom元素

2、ref 加在子组件上，用thisrefname 获取到的是组件实例，可以使用组件的所有方法。

3、利用 v-for 和 ref 获取一组数组或者dom 节点

效果图：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this$nextTick(()=>{}) 中调用。

vue 问题笔记 ref获取不到指定的DOM节点问题解决

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

以上就是关于Vue中 前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片全部的内容，包括:Vue中 前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片、vue中ref获取不到dom问题解决，关于this.$nextTick的使用、vue 的点击事件获取当前点击的元素方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！