vue tab

<template>
  <div class="tabs">
    <div class="tab-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { active: activeTab === index }]"
        @click="activeTab = index"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <component :is="tabs[activeTab].content"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          title: 'Home',
          content: 'HomeContent'
        },
        {
          title: 'About',
          content: 'AboutContent'
        },
        {
          title: 'Contact',
          content: 'ContactContent'
        }
      ]
    };
  },
  components: {
    HomeContent: {
      template: '<div>Welcome to the Home Tab!</div>'
    },
    AboutContent: {
      template: '<div>Learn more about us on the About Tab.</div>'
    },
    ContactContent: {
      template: '<div>Contact us through the Contact Tab.</div>'
    }
  }
};
</script>

<style scoped>
.tab-header {
  display: flex;
}

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

.tab-item.active {
  background-color: #42b983;
  color: white;
}

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

解释说明

1. 模板部分 (<template>):

   • 使用 v-for 指令循环渲染每个标签页的标题。
   • 使用 v-bind:class 动态绑定类名，根据当前激活的标签页设置样式。
   • 点击标签页标题时更新 activeTab 的值。
   • 使用 <component :is="..."> 动态渲染对应的内容组件。

2. 脚本部分 (<script>):

   • 定义 data 函数返回包含 activeTab 和 tabs 数组的对象。
   • tabs 数组中的每个对象包含一个标签页的标题和对应的内容组件名称。
   • 定义了三个内容组件 (HomeContent, AboutContent, ContactContent)，每个组件有一个简单的模板。

3. 样式部分 (<style scoped>):

   • 设置标签页头部的样式，使其水平排列。
   • 设置激活标签页的背景颜色和文本颜色。
   • 设置内容区域的边框和内边距。