在vue中实现tab切换效果

一只欢喜

已于 2023-06-09 10:08:32 修改

阅读量1k

点赞数 1

分类专栏： Vue项目知识及问题集合文章标签： html uni-app vue

于 2023-06-01 15:27:12 首次发布

本文链接：https://blog.csdn.net/qq_44866810/article/details/130989312

版权

Vue项目知识及问题集合专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<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>