如何实现切换v-tab活跃标签时更换图标？

步骤1：完善数据结构 #

给每个标签项添加激活状态的图标路径，同时初始化tabs的默认选中值（比如设为0，对应第一个标签）：

data() {
  return {
    tabs: 0, // 初始化选中第一个标签
    items: [
      { 
        icon: "/planeInactive.svg", 
        activeIcon: "/planeActive.svg", // 新增激活态图标
        name: "plane" 
      },
      { 
        icon: "/hotelInactive.svg", 
        activeIcon: "/hotelActive.svg", 
        name: "hotel" 
      },
      { 
        icon: "/planehotelInactive.svg", 
        activeIcon: "/planehotelActive.svg", 
        name: "plane + hotel" 
      },
      { 
        icon: "/planeInactive.svg", 
        activeIcon: "/planeActive.svg", 
        name: "students" 
      },
    ],
  };
},

步骤2：修改模板判断激活状态 #

在v-for循环中，通过索引判断当前标签是否为活跃状态，动态切换图片的src：

<v-tabs v-model="tabs" class="tabs-menu">
  <v-tab
    v-for="(item, index) in items"
    :key="index"
  >
    <!-- 根据当前标签是否选中，切换图标路径 -->
    <img :src="tabs === index ? item.activeIcon : item.icon" />
    {{ item.name }}
  </v-tab>
</v-tabs>

补充说明 #

• 如果你的标签项有唯一id字段，也可以把tabs绑定为id值，判断时用tabs === item.id，这样更稳定，避免索引变化导致的问题。
• 确保激活态的图标路径正确，和非激活态图标放在同一目录或路径正确。

内容的提问来源于stack exchange，提问作者Peter