vue 动态绑定hover背景图片
时间: 2023-05-10 10:01:19 浏览: 165
Vue是一个流行的JavaScript框架,可以实现动态显示背景图片。我们可以使用v-bind指令,将背景图的路径绑定到一个变量上。然后,我们可以给元素添加一个v-on指令,用mouseEnter和mouseLeave事件绑定两个函数,分别在鼠标移入和移出时更改变量的值。这个变量的值就是背景图片的路径,由于变化了,背景图也就动态更新了。以下是代码示例:
<template>
<div class="image" v-bind:style="{ backgroundImage: 'url(' + bgImage + ')' }" v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
<p>鼠标移入看看</p>
</div>
</template>
<script>
export default {
data() {
return {
bgImage: "https://example.com/image1.jpg"
};
},
methods: {
onMouseEnter() {
this.bgImage = "https://example.com/image2.jpg";
},
onMouseLeave() {
this.bgImage = "https://example.com/image1.jpg";
}
}
};
</script>
在上面的代码中,我们首先定义了一个div元素,绑定了背景图的路径,然后在鼠标移入和移出时改变了背景图的路径。这就实现了一个动态绑定hover背景图片的效果。
阅读全文