uni-app數據驅動滑動門

    //渲染頁面
	<view class="doorBox">
			<view class="inv-h-w">
				<!-- 檔案池 -->
				<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">檔案池</view>
				<!-- 中間豎線 -->
				<view style="height: 32upx;background-color: #d6d6d6;width: 2upx;"></view>
				<!-- 已選檔案 -->
				<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="yiXuan">已選檔案</view>
			</view>
			
			<view class="" v-show="Inv == 0">檔案池</view>
			<view class="" v-show="Inv == 1">已選檔案</view>
	</view>	
	
	//數據區
	export default {
		data() {
			return {	
				Inv: 0,
			}
		},
		methods: {
			yiXuan() {
				/* 滑動門默認值 */
				this.Inv = 1;
			}
		}
	}	
	
//樣式區
/* 滑動門 */
	.doorBox {
		width: 710upx;
		min-height: 800upx;
		margin: 20upx auto;
		font-size: 30upx;
	}

	.inv-h-w {
		height: 100upx;
		display: flex;
		margin-bottom: 40upx;
		align-items: center;
	}

	.inv-h {
		width: 350upx;
		text-align: center;
		color: #000;
		height: 100upx;
		line-height: 100upx;
		border-bottom: 2upx solid #e1e1e1;
	}

	.inv-h-se {
		color: #25b7b4;
		border-bottom: 2upx solid #25b7b4;
	}