导航栏切换

       <view class="orderNav">
			<view class="inv-h-w">
			   <view :class="['inv-h',Inv==index?'inv-h-se':'']" @click="changeTab(index)" v-for="(item,index) in navList" :key="item.id">{{item.title}}
			   </view>
			</view>
		</view>
		<view class="serCon" >
			<view class="ingCon">
				<view class="ingTop">
					<text class="blue">小时工（不擦玻璃）</text>
					<text class="jiedan">待接单</text>
				</view>
			</view>
			1111111
		</view>
		<view class="serCon" v-show="Inv == 1">
			2222
		</view>
		<view class="serCon" v-show="Inv == 2">
			3333333
		</view>

export default {
		data() {
			return {
				Inv: 0,
				navList:[				     {id:0,title:'待服务'},
				     {id:1,title:'进行中'},
				     {id:2,title:'已完成'}
				]
			};
		},
		// components: {ing},
		methods:{
			changeTab(index){
			    this.Inv = index; 
			},
		}
	}

.orderNav{
	.inv-h-w{
		background-color: #FFFFFF;
		height: 88upx;
		display: flex;
	   .inv-h{
			font-size: 30upx;
			flex: 1;
			color: #333333;
			height: 100upx;
			line-height: 100upx;
			display: flex;
			justify-content: center;
	   }
	   .inv-h-se{
			color: #4EB1EF;
			border-bottom: 5upx solid #4EB1EF;
	   }
	}
}

效果图如下：