vue 实现鼠标指向时 增加class

### 回答1：
在 Vue 中，可以使用 v-bind 指令来动态地绑定一个 class。

给定以下 HTML 代码：

<template>
  <div v-bind:class="{ active: isActive }"></div>
</template>

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

在这里，v-bind:class 绑定了一个包含 isActive 属性的对象。当 isActive 为 true 时，div 的 class 中就会有一个 active 类。

可以在 methods 中定义一个方法来改变 isActive 的值，然后在 HTML 代码中使用 @mouseover 事件来调用这个方法：

<template>
  <div @mouseover="addActiveClass" v-bind:class="{ active: isActive }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    addActiveClass() {
      this.isActive = true
    }
  }
}
</script>

这样，当鼠标指向 div 时，isActive 就会变成 true，div 的 class 中就会增加 active 类。

### 回答2：
在Vue中实现鼠标指向时增加class的效果，可以通过使用Vue的事件绑定和计算属性来实现。

首先，在需要添加class的元素上绑定鼠标移入和移出的事件。可以使用v-on指令（简写@）来实现事件绑定，例如:

<div @mouseover="addClass" @mouseout="removeClass" :class="{ 'highlight': isHover }"></div>

在data中添加一个isHover变量，用来记录鼠标是否悬停在元素上：

data() {
  return {
    isHover: false
  }
}

然后定义对应的方法addClass和removeClass，用于改变isHover的值：

methods: {
  addClass() {
    this.isHover = true
  },
  removeClass() {
    this.isHover = false
  }
}

最后，在样式中定义highlight类，样式根据isHover的值来控制是否显示：

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

这样，当鼠标移入元素时，isHover变为true，从而添加highlight类，实现指定效果；当鼠标移出元素时，isHover变为false，从而移除highlight类。

以上就是使用Vue实现鼠标指向时增加class的方法。

### 回答3：
Vue 实现鼠标指向时增加 class 的方法有以下几种：

1. 使用 v-bind 绑定 class：
在模板中使用 v-bind:class 指令，绑定一个计算属性，并设置计算属性的返回值根据鼠标事件的触发来添加或移除 class。
例如，在模板中添加以下代码：

   <div v-bind:class="{'hover-class': isHover}">
   </div>

然后在 Vue 实例中定义一个计算属性：

   data() {
     return {
       isHover: false
     };
   },

最后使用鼠标事件监听器来修改计算属性的值：

   methods: {
     handleMouseOver() {
       this.isHover = true;
     },
     handleMouseOut() {
       this.isHover = false;
     }
   }

2. 使用 v-on 绑定事件：
在模板中使用 v-on 指令，绑定鼠标事件，并在事件处理方法中使用 `$event.target` 获取当前触发事件的元素，并通过 `classList` 属性来添加或移除 class。
例如，在模板中添加以下代码：

   <div v-on:mouseover="addHoverClass" v-on:mouseout="removeHoverClass">
   </div>

然后在 Vue 实例中定义事件处理方法：

   methods: {
     addHoverClass(event) {
       event.target.classList.add('hover-class');
     },
     removeHoverClass(event) {
       event.target.classList.remove('hover-class');
     }
   }

3. 使用 Vue 的指令：
Vue 提供了一些内置的指令，如 v-on 和 v-bind，同时也可以自定义指令来实现鼠标指向时增加 class 的效果。
例如，我们可以定义一个名为 v-hover-class 的指令，在指令的 bind 和 unbind 钩子函数中分别添加和移除 class。

   Vue.directive('hover-class', {
     bind(el) {
       el.addEventListener('mouseover', function() {
         el.classList.add('hover-class');
       });
       el.addEventListener('mouseout', function() {
         el.classList.remove('hover-class');
       });
     },
     unbind(el) {
       el.removeEventListener('mouseover');
       el.removeEventListener('mouseout');
     }
   });

然后在模板中使用这个指令：

   <div v-hover-class>
   </div>