vue div鼠标悬浮时更改颜色

在Vue中，可以通过绑定事件来实现鼠标悬浮时更改`div`颜色的功能。Vue提供了`.bind`和`.on`指令来监听事件，使用`.style`或者`:style`来动态更改样式。具体方法如下：

1. 使用`.bind`指令绑定`mouseover`和`mouseout`事件，并通过`:style`来动态修改样式。
2. 在Vue实例的`methods`中定义方法来改变颜色。
3. 在`div`元素上使用绑定的方法来响应事件。

以下是一个简单的示例代码：

<template>
  <div :style="{ backgroundColor: isHovered ? 'red' : 'blue' }" 
       @mouseover="changeColor" 
       @mouseout="resetColor">
  </div>
</template>

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

在上面的代码中，`div`元素在鼠标悬浮时会变红，在鼠标移开后会恢复蓝色。`isHovered`是一个数据属性，用来追踪鼠标是否悬浮在`div`上。`changeColor`方法会将`isHovered`设置为`true`，而`resetColor`方法则会将其重置为`false`。`:style`绑定会根据`isHovered`的值来动态改变背景颜色。