vue 实现鼠标指向文字变色

Vue 提供了内置的指令来响应 DOM 事件，你可以使用 `v-on` 指令在元素上绑定事件监听器。

在这个例子中，我们可以使用 `v-on:mouseover` 指令来监听鼠标指向元素的事件，然后在监听器中改变元素的样式来实现鼠标指向文字变色的效果。

下面是一个简单的例子：

<template>
  <div v-on:mouseover="changeColor">
    鼠标指向文字会变色
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.style.color = 'red';
    },
  },
};
</script>

<style>
div {
  color: black;
}
</style>

在上面的代码中，我们在 div 元素上绑定了 `v-on:mouseover` 事件监听器，然后在监听器中调用了 `changeColor` 方法。`changeColor` 方法会改变 div 元素的样式，使得文字变成红色。

你也可以使用简写的 `@` 来代替 `v-on`，所以上面的代码可以简写成下面的形式：

<template>
  <div @mouseover="changeColor">
    鼠标指向文字会变色
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.style.color = 'red';
    },
  },
};
</script>

<style>
div {
  color: black;
}
</style>

希望这个回答对你有帮助。如果有任何其他问题，可以随时问我。