vue3怎么鼠标经过换背景颜色

你可以使用 Vue 3 来实现鼠标经过时换背景颜色的效果。以下是一个简单的示例：

首先，在你的组件模板中，绑定一个鼠标进入和离开事件，用来触发颜色的变化。例如：

<template>
  <div
    class="box"
    @mouseenter="changeBackgroundColor(true)"
    @mouseleave="changeBackgroundColor(false)"
  >
    <!-- 内容 -->
  </div>
</template>

接下来，在组件的 `data` 中定义一个变量来保存背景颜色的状态，并创建一个方法来改变背景颜色。例如：

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

最后，在组件的样式中使用动态绑定类名的方式来控制背景颜色。例如：

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.hovered {
  background-color: #ff0000;
}
</style>

<template>
  <div
    class="box"
    :class="{ hovered: isHovered }"
    @mouseenter="changeBackgroundColor(true)"
    @mouseleave="changeBackgroundColor(false)"
  >
    <!-- 内容 -->
  </div>
</template>

这样，当鼠标经过时，背景颜色会变成红色（#ff0000），离开时则恢复为默认背景色（#ccc）。

希望能对你有所帮助！如有任何问题，请随时提问。