写一个简单的vue tab切换带样式

Vue.js 中实现一个简单的tab切换组件，并带有基本样式，可以参考下面的示例代码：

<template>
  <div class="tab-container">
    <button v-for="(item, index) in tabs" :key="index" :class="{ active: isActiveTab(index) }" @click="setActiveTab(index)">
      {{ item.title }}
    </button>

    <transition name="slide-fade">
      <div v-show="activeTab === index" class="tab-content">
        {{ tabs[index].content }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', content: '这是第一个内容' },
        { title: 'Tab 2', content: '这是第二个内容' },
        { title: 'Tab 3', content: '这是第三个内容' }
      ],
      activeTab: 0,
    };
  },
  methods: {
    setActiveTab(index) {
      this.activeTab = index;
    },
    isActiveTab(index) {
      return this.activeTab === index;
    },
  },
  computed: {},
};
</script>

<style scoped>
.tab-container {
  display: flex;
  justify-content: space-between;
}

button {
  background-color: #ddd;
  color: black;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-bottom: 5px;
}

button.active {
  background-color: #ccc;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 0.3s ease;
}

.tab-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.tab-content.show {
  opacity: 1;
  max-height: unset;
}
</style>

这个例子中，我们创建了一个包含三个选项卡按钮的容器。每个按钮点击时会切换对应的`tab-content`块。通过CSS的`:class`属性，我们可以给激活的按钮添加样式，同时使用`v-show`和`transition`属性实现淡入淡出效果。