vue3鼠标悬停替换图标

在 Vue3 中，你可以利用 v-bind:class 或者 :style 标签以及计算属性来实现鼠标悬停时替换图标的功能。这里是一个简单的例子：

<template>
  <button @mouseenter="hoverState = true" @mouseleave="hoverState = false">
    <span v-if="!hoverState">{{ iconOne }}</span>
    <span v-if="hoverState">{{ iconTwo }}</span>
    <img :src="hoverIconSrc" alt="" v-if="hoverState" style="display:none;"> <!-- 隐藏默认图标 -->
  </button>
</template>

<script>
export default {
  data() {
    return {
      hoverState: false,
      iconOne: 'default_icon_1',
      iconTwo: 'hover_icon_2',
      hoverIconSrc: 'hover_icon_url', // 悬停时显示的图片URL
    };
  },
};
</script>

在这个例子中，当鼠标悬停在按钮上时，`hoverState` 变为 `true`，此时会展示 `iconTwo` 和隐藏默认图标，如果移开鼠标则 `hoverState` 为 `false`，再次显示 `iconOne`。