あるサイトを真似てサイトを作成しています。
実現したいこと:v-forを使って画像表示 + マウスオーバーしたら画像切り替え
v-forを使って画像を3枚表示して、その3枚をそれぞれマウスオーバーしたら表示するという機能を作りたいと思っています。
v-forを使わずに作成することは可能でしたが、v-forを使うと画像の表示はできたのですが、マウスオーバーをしても反応せずにエラー表示もありませんでした。
何が原因なのかも全くわからなかったのでお答えいただけるとありがたいです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app1"> <img v-bind:src = "imageName" width="100" height="100"></img> <div v-on:mouseover="imgchange1()"> <img v-bind:src="item.image" v-for="item in items" width="50" height="50"> </div> <img v-bind:src = "imageName1" v-on:mouseover="imgchange1()" width="50" height="50"></img> <img v-bind:src = "imageName2" v-on:mouseover="imgchange2()" width="50" height="50"></img> <img v-bind:src = "imageName3" v-on:mouseover="imgchange3()" width="50" height="50"></img> </div> <script type="text/javascript" src="../js/test.js"></script> </body> </html>
new Vue({ el:"#app1", data:{ imageName:"../image/food.jpg", imageName1:"../image/food.jpg", imageName2:"../image/food1.jpg", imageName3:"../image/food2.jpg", items:[ {image:"../image/food.jpg"}, {image:"../image/food1.jpg"}, {image:"../image/food2.jpg"}, ], }, methods:{ imgchange1:function(){ this.imageName = this.imageName1 }, imgchange2:function(){ this.imageName = this.imageName2 this.imageName1 = this.imageName1 }, imgchange3:function(){ this.imageName = this.imageName3 this.imageName1 = this.imageName1 } } })
回答1件
あなたの回答
tips
プレビュー