vue实现tab栏切换案例

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

1. 在组件中定义数据和方法

<template>
  <div>
    <div class="tab">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: currentIndex === index }"
        @click="changeTab(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="content">
      {{ tabsContent[currentIndex] }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['tab1', 'tab2', 'tab3'],
      tabsContent: ['content1', 'content2', 'content3'],
      currentIndex: 0
    }
  },
  methods: {
    changeTab(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
.tab {
  display: flex;
}
.tab > div {
  padding: 10px;
  cursor: pointer;
}
.tab > div.active {
  background-color: #eee;
}
.content {
  padding: 20px;
}
</style>

2. 在父组件中使用 Tab 组件

<template>
  <div>
    <tab></tab>
  </div>
</template>

<script>
import Tab from './Tab.vue'

export default {
  components: {
    Tab
  }
}
</script>

这里只是一个简单的实现，如果需要更复杂的功能，可以根据实际需求进行扩展。