在vue中如何用tabbar使底部图标被鼠标点击而改变颜色

在Vue中，你可以使用TabBar组件来实现底部图标被点击后改变颜色的效果。以下是一个简单的示例代码：

<template>
  <div>
    <tab-bar-item
      v-for="item in tabBarItems"
      :key="item.id"
      :active="activeTab === item.id"
      @click="changeTab(item.id)"
    >
      <img :src="item.icon" :alt="item.name" />
      <span>{{ item.name }}</span>
    </tab-bar-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '', // 当前选中的tab的id
      tabBarItems: [
        {
          id: 'home',
          name: '首页',
          icon: 'home.png',
        },
        {
          id: 'category',
          name: '分类',
          icon: 'category.png',
        },
        {
          id: 'cart',
          name: '购物车',
          icon: 'cart.png',
        },
        {
          id: 'profile',
          name: '个人中心',
          icon: 'profile.png',
        },
      ],
    };
  },
  methods: {
    changeTab(tabId) {
      this.activeTab = tabId;
    },
  },
};
</script>

<style scoped>
.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-bar-item img {
  width: 24px;
  height: 24px;
}

.tab-bar-item span {
  font-size: 12px;
}

.tab-bar-item.active {
  color: red; // 改变选中tab的文字颜色
}
</style>

在上述代码中，我们使用`v-for`指令根据`tabBarItems`数组动态渲染TabBar的每个项。点击每个项时，会调用`changeTab`方法，将当前选中的tab的id赋值给`activeTab`，从而改变选中tab的样式。在样式部分，我们使用`.tab-bar-item.active`来定义选中状态下的样式，例如改变文字颜色为红色。

请注意，上述代码只是一个示例，你可以根据自己的需求进行修改和扩展。