vue3鼠标移入移出

 盒子循环，各过各的，有需求的可在方法中传参

<template>  
<div style="display: flex">
    <div v-for="(item, index) in arr" :key="index" style="background-color: greenyellow;">
      <div @mouseenter="mouseenter" @mouseleave="mouseleave"
           style="background-color: gray;width: 100px;height: 50px;margin: 20px">
        {{ index + "下标-------内容" + item }}
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref } from "vue";

const arr = ref([1, 2, 3]);
const mouseenter = () => {
  console.log(1 + "鼠标进入");
};

const mouseleave = () => {
  console.log(3 + "鼠标离开");
};

</script>