用vue.js写出一个选项卡

Vue.js可以轻松地创建选项卡组件，下面是一个简单的例子，展示了如何使用 Vue 的模板、组件以及指令来实现一个基础的选项卡功能：

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

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '选项卡1', content: '这是第一个内容' },
        { title: '选项卡2', content: '这是第二个内容' },
        { title: '选项卡3', content: '这是第三个内容' }
      ]
    };
  },
  directives: {
    tabAnimation: {
      enter: function (el, binding, vnode) {
        el.style.height = '0';
        setTimeout(() => {
          el.style.height = '';
        }, 50);
      }
    }
  }
};
</script>

<style scoped>
.tab-content {
  display: none;
  height: 100px; /* 根据实际需求调整 */
}
.tab-animation-enter-active {
  transition: all 0.5s ease-in-out;
}
</style>

在这个例子中，我们定义了一个名为 `tabs` 的数组，每个对象代表一个选项卡，包含标题和内容。`v-for` 指令用于渲染按钮和内容区域。当点击按钮时，`activeTab` 变量会改变，对应的内容区域通过 `v-show` 指令显示出来。同时，我们还添加了一个自定义的过渡动画 (`tab-animation`)，以便平滑切换。