vue实现tab切换实验内容

好的，下面是一个简单的 Vue 实现 tab 切换的示例：

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

<script>
export default {
  data() {
    return {
      currentTab: 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'
        }
      ]
    }
  }
}
</script>

<style>
.tab-container {
  display: flex;
  flex-direction: column;
  width: 500px;
}

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

.tab-nav li {
  margin-right: 10px;
  padding: 5px;
  cursor: pointer;
  border: 1px solid #ccc;
}

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

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

这个示例中，我们使用了一个 `currentTab` 变量来记录当前选中的 tab，然后使用 `v-for` 循环渲染出每个 tab 的标题和内容。标题部分使用一个 ul 和若干个 li 元素来展示，而内容部分则使用若干个 div 元素，并通过 `v-show` 指令来控制哪个内容块显示。在点击某个 tab 标题时，我们通过 `@click` 事件来更新 `currentTab` 的值，从而切换到对应的内容。

以上是一个简单的 Vue 实现 tab 切换的示例，你可以在此基础上根据自己的需求进行调整和扩展。