VUE中写一个hover效果

<template>
    <div>
        啊哈哈哈
        <div :class="flag ? 'item ani' : 'item'" @mouseenter = "haha" @mouseleave="haha">效果出来吧</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                flag:false
            }
        },
        methods:{
            haha(){
                this.flag = !this.flag;
            }
        }
    }
</script>

<style scoped>
    .item{
        width: 200px;
        height: 200px;
        background: yellow;
    }
    .ani{
                width: 200px;
        height: 200px;
        background-color: green;
    }
</style>