vue写一个选项卡

可以使用Vue的组件化思想来实现一个选项卡。以下是一个基本的示例：

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

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          name: 'Tab 1',
          content: 'This is the content of Tab 1.'
        },
        {
          name: 'Tab 2',
          content: 'This is the content of Tab 2.'
        },
        {
          name: 'Tab 3',
          content: 'This is the content of Tab 3.'
        }
      ]
    }
  }
}
</script>

<style>
.tab {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

以上代码实现了一个简单的选项卡，包含三个选项卡，每个选项卡都有一个标题和内容。当用户点击选项卡标题时，相应的内容将呈现在选项卡下方。