vue3中写一个选项卡

在Vue3中写一个选项卡可以按照以下步骤：

1. 在Vue组件中定义选项卡的数据和方法，如选项卡的标题、内容等。可以使用reactive函数创建响应式数据。

import { reactive } from 'vue';

export default {
  setup() {
    const tabs = reactive([
      { title: 'Tab 1', content: 'This is tab 1 content' },
      { title: 'Tab 2', content: 'This is tab 2 content' },
      { title: 'Tab 3', content: 'This is tab 3 content' },
    ]);

    const activeTab = reactive(tabs[0]);

    const setActiveTab = (tab) => {
      activeTab.title = tab.title;
      activeTab.content = tab.content;
    };

    return {
      tabs,
      activeTab,
      setActiveTab,
    };
  },
};

2. 在模板中使用v-for指令循环渲染选项卡的标题，并绑定click事件触发setActiveTab方法来切换选项卡。

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

3. 在样式中定义选项卡和选中状态样式。

.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

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

.tab.active {
  border-bottom: 2px solid red;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
}

这样就完成了一个简单的选项卡组件。