gpt4 book ai didi

vue.js - 如何在 vue.js 中更改鼠标悬停时的图像?

转载 作者:行者123 更新时间:2023-12-05 08:42:03 24 4
gpt4 key购买 nike

在 Vue.js 中,我可以将图像绑定(bind)到 img 元素:

<img v-bind:src="myimage" />

如何定义当鼠标移到这张图片上时显示的另一张图片?

最佳答案

mouseover 监听器中更改 myImage 的值:

new Vue({
el: '#app',
data() {
return {
myImage: "https://s-media-cache-ak0.pinimg.com/originals/bd/5d/84/bd5d845c980508d41b0329dc21d08d2b.jpg",
otherImage: "https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg"
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
<img :src="myImage" @mouseover="myImage = otherImage"/>
</div>

关于vue.js - 如何在 vue.js 中更改鼠标悬停时的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45311433/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com