vue.jsのマウスオーバーで画像を変更するには？

Vue.jsで、私はimg要素に画像をバインドすることができます。vue.jsのマウスオーバーで画像を変更するには？

<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

これで作業中です。ちなみに、デベロッパーコンソールが開いているとき、マウスオーバーイベントは発生していませんでした。ご協力いただきありがとうございます。 – user761100

vue.jsのマウスオーバーで画像を変更するには？

答えて

関連する問題