初心者向け。Vue.jsで画像をマウスオーバーした時の切り替えのやり方

1881 回閲覧されました

公開日 : 2021年7月26日
最終更新日 : 2024年9月1日

Vue.jsでマウスオーバーした時の画像の切り替えですがやり方を忘れる自分が後で思い出せるように記事を書きました。

デモは↓です。

最初は画像の色が薄くてマウスオーバーすると画像の色が黒になりますが画像の切り替えで実現しています。

完成形のコードは↓です。

	<template>
	<div>
	<img
	:src="image"
	@mouseover="imageChange()"
	@mouseleave="imageReturn()"
	>
	</div>
	</template>

	<script>

	export default {
	data() {
	return {
	image: require('@/assets/images/off1.png'),
	}
	},
	methods: {
	imageChange(){
	this.image = require('@/assets/images/on1.jpg');
	},
	imageReturn(){
	this.image = require('@/assets/images/off1.png');
	}
	}
	}
	</script>

view raw 完成形のコード hosted with

by GitHub

コードの解説をします。

16行目は最初の状態の画像でそれを表示するための記述が4行目です。

画像をマウスオーバーした時のメソッドを5行目（imageChange()のこと）、マウスオーバーを外した時のメソッドを6行目（imageReturn()のこと）に書いています。

5行目のメソッドの中身（画像をマウスオーバーすることでなにをするか）ですが21行目に記述があり4行目のsrc属性（imageのことでマウスオーバーする前はrequire(‘@/assets/images/off1.png’)）をrequire(‘@/assets/images/on1.jpg’)にしています。

これで画像が変化します。

マウスオーバーを外した時は元の画像に戻せばいいので24行目の記述にすればいいです。（画像のsrc属性を最初の時にする）

これで完成ですが簡単に実装できます。