效果

代码

<template><view><view class="tab-bar"><text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">页面1</text><text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">页面2</text><text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">页面3</text></view><view v-show="activeTab === '0'"><!-- 页面1的内容 --><text>页面1</text></view><view v-show="activeTab === '1'"><!-- 页面2的内容 --><text>页面2</text></view><view v-show="activeTab === '2'"><!-- 页面3的内容 --><text>页面3</text></view></view>
</template><script>
export default {data() {return {activeTab: '0'};},methods: {changeTab(index) {this.activeTab = index;}}
};
</script><style>
.tab-bar {display: flex;justify-content: space-between;width:100%;
}.tab {padding: 10px;font-size: 16px;cursor: pointer;/* border: 1px solid black; */width:33%;text-align: center;border-bottom: 1px solid #ccc;
}.active {color: #74bfe7;/* background-color:#74bfe7; */border-bottom: 1px solid #74bfe7;
}
</style>