<!-- 定义导航栏的文字 -->
		<view class="nav">
			<view class="flex_between">
				<view class="nav_title" v-for="item in nav">
					<view :class="{'active':isActive==item.isActive}" @click="chenked(item.isActive)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

        <view class="nav_item" v-if="isActive == 1">
          11111111
        </view>

        <view class="nav_item" v-if="isActive == 1">
         2222222
        </view>
         
        <view class="nav_item" v-if="isActive == 1">
         333333
        </view>

                nav: [{
						name: '课程列表',
						isActive: 1
					},
					{
						name: '我的课程',
						isActive: 2
					}
				],
				isActive: 1,
                
                methods:{
               //切换nav
			   chenked(type) {
				     this.isActive = type
			   },
             }
               

<style lang="less">
	.nav {
		border-top: 1rpx solid #f2f2f2;
		background-color: #fff;

		.flex_between {
			display: flex;

			.nav_title {
				height: 88rpx;
				line-height: 88rpx;
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-family: "PingFang";
				color: rgb(102, 102, 102);
			}
		}
	}

	.nav_item {
		padding: 20rpx;

	}

	.active {
		position: relative;
		color: #2D99F5;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 375rpx;
		height: 4rpx;
		background-color: #2D99F5;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
</style>

实现效果