JavaScript

Vue.jsでマウスオーバー時に画像を切り替える方法

課題を持った人
課題を持った人
Vue.jsでマウスオーバー時に画像が切り替わる処理を実装したいんだけど、どうやってやればいいの?

こういった要望に答えます。

下準備として、以下をご用意ください。すべて同階層のディレクトリに格納してください。

  • index.html
  • img_on.png ※マウスカーソルが重なった時に表示される画像
  • img_off.png ※マウスカーソルが外れた時に表示される画像

Vue.jsを使うための準備

Vue.jsを使うための準備をします。Vue.jsの一番お手軽な導入方法は、script要素で直接読み込むことです。

Vueインスタンスをマウントする

Vue.jsの処理は、Vueインスタンスを生成し、DOM要素にマウントするところから始まります。マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えることです。

関数を呼び出す処理を追加する

「@mouseover=”changeImg”」という記述は、画像にマウスカーソルが重なった時に、changeImg関数を呼ぶという意味です。「@mouseover」は「v-on:mouseover」の省略形です。

「@mouseleave=”returnImg”」という記述は、画像からマウスカーソルが外れた時に、returnImg関数を呼ぶという意味です。「@mouseleave」は「v-on:mouseleave」の省略形です。

関数を定義する

関数はmethodsプロパティ内に定義します。

changeImgメソッドが呼び出された時の動作は以下のとおりです。

  1. 対象画像のURIを取得する
  2. 取得したURIの「_off.png」の部分を正規表現を使って「_on.png」に置き換え
  3. 「_on.png」に置き換えたURIを画像に適用する

returnImgメソッドが呼び出された時の動作は以下のとおりです。

  1. 対象画像のURIを取得する
  2. 取得したURIの「_on.png」の部分を正規表現を使って「_off.png」に置き換え
  3. 「_off.png」に置き換えたURIを画像に適用する
筆者
筆者
他にもいろいろ作り方はあると思いますが、Vue.jsでマウスオーバー時に画像を切り替える処理の紹介でした。