写一段vue的hover更新样式的代码

当鼠标移入或移出元素时，我们可以利用Vue的`v-bind`指令和`methods`对象来更新元素的样式，如下所示：

<template>
  <div
    :class="{ active: isHover }"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  >
    Hover Me
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHover: false,
    };
  },
  methods: {
    handleMouseOver() {
      this.isHover = true;
    },
    handleMouseOut() {
      this.isHover = false;
    },
  },
};
</script>

<style>
.active {
  background-color: #f5f5f5;
}
</style>

这段代码中，我们在`data`中定义了一个`isHover`状态，它表示元素是否处于hover状态。然后在模板中，我们利用`v-bind`指令动态绑定`class`属性，根据`isHover`的值来决定是否添加`active`类名，从而改变元素的背景颜色。

接着，在`methods`对象中，我们定义了`handleMouseOver`和`handleMouseOut`方法，它们分别在鼠标移入和移出元素时被调用，更新`isHover`状态的值。

最后，我们在样式中定义了`.active`类，设置了元素的背景颜色。