vue鼠标悬浮淡入淡出

你可以通过 `transition` 和 `@mouseenter`、`@mouseleave` 事件来实现鼠标悬浮淡入淡出的效果。具体步骤如下：

1. 在需要添加淡入淡出效果的元素上添加 `transition` 属性，定义元素的过渡效果。

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

2. 在元素上添加 `v-show` 指令，并绑定一个响应式变量 `show`。

<div v-show="show" class="fade">鼠标悬浮显示的内容</div>

3. 在元素上添加 `@mouseenter` 和 `@mouseleave` 事件，并在事件处理函数中修改 `show` 的值。

<div @mouseenter="show = true" @mouseleave="show = false">鼠标悬浮显示的元素</div>

完整代码如下：

<template>
  <div>
    <div @mouseenter="show = true" @mouseleave="show = false">
      鼠标悬浮显示的元素
    </div>
    <div v-show="show" class="fade">
      鼠标悬浮显示的内容
    </div>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

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