如何更改vue.js中mouseover上的图像？

在Vue.js，我可以将图像结合img元素：如何更改vue.js中mouseover上的图像？

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

如何可以定义显示当在这个图象鼠标移动的另一图像？

来源

2017-07-25 user761100

在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>

来源

2017-07-25 19:00:46 thanksd

我无法使鼠标悬停工作。这是我的简化代码：'code' 'code'。当页面显示包含在** image **中的图片时，它不会显示** image_url **中包含的鼠标悬停图片。我感谢您的帮助。 – user761100

'image_url'是你想要在鼠标悬停上显示的图像的地址吗？如果是这样，你的'image_hover'方法设置'this.image = this.image_url'？ – thanksd

现在正在工作。顺便说一句，当开发者控制台打开时，mouseover事件不会触发。谢谢你的帮助。 – user761100

如何更改vue.js中mouseover上的图像？

回答

相关问题