vue做出hover

要在Vue中实现hover效果，你可以使用Vue的指令（directive）或者绑定样式（class）来实现。

1. 使用Vue指令：
在Vue模板中，你可以使用v-on指令来监听鼠标事件，并在对应事件触发时改变元素的样式。例如，你可以使用v-on指令监听鼠标进入和离开事件，并使用data中的一个属性来控制样式的变化。

<template>
  <div>
    <div v-on:mouseenter="isHovered = true" v-on:mouseleave="isHovered = false" class="box" :class="{ 'box-hovered': isHovered }">
      Hover me
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    };
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box-hovered {
  background-color: blue;
}
</style>

在上面的代码中，我们在data中定义了一个isHovered属性来表示鼠标是否悬停在元素上。然后通过v-on指令监听鼠标进入和离开事件，并通过:class绑定来动态添加或移除box-hovered类来改变样式。

2. 使用绑定样式：
你也可以使用绑定样式来实现hover效果。给元素绑定一个动态类，然后在样式中定义该类的样式。

<template>
  <div>
    <div @mouseenter="isHovered = true" @mouseleave="isHovered = false" :class="{ 'box': true, 'box-hovered': isHovered }">
      Hover me
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    };
  }
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box-hovered {
  background-color: blue;
}
</style>

在上面的代码中，我们使用@mouseenter和@mouseleave来监听鼠标进入和离开事件。通过:class绑定来动态添加或移除box-hovered类来改变样式。

无论是使用指令还是绑定样式，都要根据你的实际需求来选择适合的方法。希望对你有所帮助！