Vue.jsでサムネ画像をマウスオーバーするとメイン画像が切り替わる
1610 回閲覧されました
WEBサイトでよく見るのですがサムネイル画像をマウスオーバーしたときにメインの画像が表示される
やつです。
Vue.jsで記述で実装します。
最初はメイン画像に画像1が表示されていてサムネイルの他の画像をマウスオーバーするとメインの画像がマウスオーバーしたサムネイル画像と同じになりマウスオーバーを外すとメイン画像は直前のマウスオーバーしたサムネイル画像のままになっている仕様です。
デモは↓です。
今回は画像を使いますが↓からダウンロードしてください。
サムネイルをマウスオーバーするとメイン画像が変わるに使う画像 (1560 ダウンロード )サムネイル画像のみの表示
まずはサムネイル画像のみを表示します。
コードを↓にします。
これで↓になります。
v-forディレクティブを使って画像の表示をしています。（10行目です）
10行目の「index」は画像のインデックス番号です。
htmlファイルでv-forディレクティブを使うときは「:key=”index”」がなくてもエラーになりませんがターミナル（コマンドプロンプト）でVue.jsのプロジェクトを作った場合はエラーになります。
ちなみにプロジェクトを作った時のv-forディレクティブは↓と書かないといけません。
27行目、30行目、33行目、36行目、39行目の画像の読み込みですがターミナルでVue.jsのプロジェクトを作った場合は書き方が変わりますので注意してください。
プロジェクトで画像を読み込む場合の書き方は↓で説明しています。
メイン画像に画像1を表示
コードを↓にします。
これで↓になります。（今の時点ではマウスオーバーしても画像は切り替わりません）
59行目のthis.images[this.currentImageIndex]の「[ ]」ですがこれは配列ではないです。
this.currentImageIndexが今の段階は0（52行目）ですがthis.images[this.currentImageIndex]で「35行目〜51行目のimagesの中のインデックス番号が0の画像を選んでいる」という意味です。（この画像がメイン画像です）
そしてそれを11行目〜14行目で表示しています。
57行目で画像を選ぶのにcomputedを使っていますがcomputedとmethodsの使い分けは↓で説明しています。
マウスオーバーしたら画像が切り替わる
最後はマウスオーバーした時に画像の切り替えです。
コードを↓にします。
画像をマウスオーバーした時を考えるのでv-onディレクティブのイベントは「mouseover」を使います。（19行目）
マウスオーバーする画像は5つありますがマウスオーバーした時の画像がどれかをmouseoverイベントに伝えないといけないので引数にindexを使って14行目のindexと同じにしています。
画像をマウスオーバーした時に10行目のcurrentImageUrlをマウスオーバーした画像のインデックス番号にしないといけないので59行目があります。
これで完成です。