vue3.0 鼠标移入该元素时i标签添加css

在 Vue.js 3.x 中，你可以通过绑定事件处理器和修改样式动态地在鼠标移入元素时给 i 标签添加 CSS 类。下面是一个简单的示例：

首先，在你的组件模板中，假设有一个列表项包含一个 i 标签，当鼠标移入这个列表项时你想改变其样式：

<template>
  <li @mouseenter="handleMouseEnter">
    <i :class="{ active: isHovered }">I</i>
  </li>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false,
    };
  },
  methods: {
    handleMouseEnter() {
      // 当鼠标移入时设置 isHovered 为 true
      this.isHovered = true;
    },
  },
  // 如果需要移除样式，可以在 mouseleave 事件中设置回 false
  // methods: {
  //   handleMouseLeave() {
  //     this.isHovered = false;
  //   },
  // }
};
</script>

<style scoped>
.active {
  /* 这里是你想要应用的CSS样式 */
  color: red;
  text-decoration: underline;
}
</style>

在这个例子中，`handleMouseEnter` 方法会在鼠标移入 li 元素时被触发，将 `isHovered` 的值设为 `true`，使得 i 标签获得 `active` 类并应用相应的 CSS 样式。