Vue:使用v-tab显示不同选项卡的不同信息

<template>
  <div>
    <div class="tabs">
      <div class="tab" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)" :class="{ active: activeTab === index }">
        {{ tab.title }}
      </div>
    </div>
    <div class="content">
      <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前活动的选项卡索引
      tabs: [
        { title: 'Tab 1', content: 'This is the content of Tab 1' },
        { title: 'Tab 2', content: 'This is the content of Tab 2' },
        { title: 'Tab 3', content: 'This is the content of Tab 3' },
      ],
    };
  },
  methods: {
    changeTab(index) {
      this.activeTab = index; // 切换选项卡
    },
  },
};
</script>

<style>
.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

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

.content {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>