动态图标切换的艺术

动态图标切换的艺术 - Vue实战指南

图标切换的本质：状态与视觉的双重舞蹈

在前端开发中，图标切换就像我们日常生活中的换装游戏。想象一下，当你按下卧室的开关，灯泡从暗变亮；当你打开衣柜，选择不同场合的着装。图标切换的核心就是根据状态变化呈现不同的视觉效果。

方案大比拼：各显神通

方案1: CSS类切换 - 简洁的魔法服装店

类比：就像一个魔法服装店，顾客（组件）走进来，只需说出场合（状态），店主就会递上合适的衣服（图标）。

<template><div class="icon" :class="{ 'active': isActive }" @click="toggle"></div>
</template><style scoped>
.icon {background: url('/normal-icon.svg');
}
.icon.active {background: url('/active-icon.svg');
}
</style>

优点：代码量少，易于理解，性能好
适用场景：状态简单（开/关、选中/未选中）的场景

方案2: 计算属性 - 聪明的私人造型师

类比：拥有一位私人造型师（计算属性），他会根据你的心情（数据状态）实时调整你的穿着（样式）。

<template><div :style="iconStyle"></div>
</template><script setup>
const iconStyl