Vue.js マウスオンでスタイル変更、カーソルが離れたら元に戻す

例えばボタンの役割を担うアイコンなど。

マウスオーバー（マウスカーソルが乗る）のタイミングで、色が変わってアクティブな感じに。

マウスアウト（マウスカーソルが外れる」）のタイミングで、元の色に戻るようにする。

↑このカメラのアイコンにマウスが重なった時だけ、アイコンを半透明にしたいときとか。

<template>
    <div class="icon">
        <label style="display:initial;">
            <font-awesome-icon 
            :class="activeStatus" 
            @mouseover="beActive"
            @mouseleave="beInActive" 
            class="child" 
            :icon="['fa', 'camera']" />
            <input type="file" class="form-control-file " ref="file"
                @change="fileSelected" accept=".jpg,.jpeg,.png,.gif"
                style="display:none">
        </label>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                activeStatus: 'inactive'
            }
        },
        methods: {
            beActive() {
                console.log('マウスオーバー')
                this.activeStatus = 'active'

            },
            beInActive() {
                console.log('マウス外れた')
                this.activeStatus = 'inactive'
            },
        }
</script>
<style scoped>
    .icon{
        color:white;
    }
    .inactive {
        /*何も書かなくていいかも*/
    }
    .active {
        opacity: 0.8;
    }
</style>

5行目から7行目にかけての:class="activeStatus" @mouseover="beActive" @mouseleave="beInActive" が今回のポイント。

マウスが乗ったら、beActiveというメソッドが発動

ハウスが外れたら、beInActiveというメソッドが発動

それにより、クラスが切り替わって見た目が変わる。

そんなかんじ。

booleanで切り替えるとかもっとスマートな方法があるかもしれないけど、まあいったんこれで動いた。

参考にしたサイト

【Vue.js】マウスオーバーとマウスリーブ｜Into the Program