iconpark VUE如何设置字体在鼠标经过时改变颜色

你可以使用 Vue 的内置指令 `v-bind:class` 和 `v-on` 来实现鼠标经过时字体颜色改变的效果。具体步骤如下：

1. 在样式表中定义两个类，一个是默认状态下的类，一个是鼠标经过时的类，如下所示：

.default-color {
  color: #333;
}
.hover-color {
  color: #f00;
}

2. 在 Vue 模板中使用 `v-bind:class` 指令将默认状态下的类绑定到元素上：

<template>
  <div v-bind:class="{ 'default-color': true, 'hover-color': isHover }"
       v-on:mouseover="isHover = true"
       v-on:mouseleave="isHover = false">
    This is a text.
  </div>
</template>

3. 在 Vue 实例中定义 `isHover` 变量，并在 `v-on` 中绑定鼠标移入和移出事件来改变 `isHover` 的值：

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

这样，当鼠标移入元素时，`isHover` 的值会变为 `true`，从而将 `hover-color` 类绑定到元素上，字体颜色会变为红色；当鼠标移出元素时，`isHover` 的值会变为 `false`，从而将 `hover-color` 类从元素上移除，字体颜色会恢复为默认颜色。