<template>
  <view>
    <view class="tab">
      <view
        class="tab-item"
        :class="{ active: currentTab === 0 }"
        @click="switchTab(0)"
        >Tab1</view
      >
      <view
        class="tab-item"
        :class="{ active: currentTab === 1 }"
        @click="switchTab(1)"
        >Tab2</view
      >
      <view
        class="tab-item"
        :class="{ active: currentTab === 2 }"
        @click="switchTab(2)"
        >Tab3</view
      >
    </view>
    <view class="content">
      <view v-show="currentTab === 0">Content1</view>
      <view v-show="currentTab === 1">Content2</view>
      <view v-show="currentTab === 2">Content3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
  },
};
</script>

<style>
.tab {
  display: flex;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10rpx;
}
.tab-item.active {
  background-color: #f5f5f5;
}
.content {
  padding: 10rpx;
}
</style>