uniapp中两个单页面v-if的和click点击事件配合使用tab切换案例

如果看的乱去掉注释就一目了然了

<template>
	<view class="page">
		<view class="content flex" >
			<!-- 左边 -->
			<view class="left" >
				<!-- @click="list()"		标签设置点击事件 -->
				<view class="left_title" @click="list()">
					左边标题
				</view>
				
				<!-- v-if="type == 'A' "	标签摄者是隐藏的意思	若想显示 data里面等于这个A值即可 -->
				<view class="left_txt" v-if="type == 'A' ">
					这是上面内容
				</view>
			</view>
			<!-- 右边 -->
			<view class="right" >
				<view class="right_title" @click="list()">
					右边标题
				</view>
				<view class="right_txt" v-if="type == 'B' ">
					这是上面内容
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:'A'
			}
		},
		methods:{
			list(){
				if(this.type == 'A'){		//	假如 左边等于 右边			==	代表等于
					this.type = 'B'				//	左边 赋值 给右边			=	代表赋值		这里面可以这样理解	如果赋值是这个 this.type = 'A'	那么点击一直是这个就会不显示	所以是相反的那个
				} else {
					this.type = 'A'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		.content{
			width: 100%;
			height: 300rpx;
			background-color: #999999;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.left{
				width: 50%;
				height: 100%;
				background-color: #CC6699;
				border: 1rpx solid black;
				.left_title{
					width: 100%;
					height: 20%;
					background-color: #FF9900;
					text-align: center;
					border-bottom: 1rpx solid black;
				}
			}
			.right{
				width: 50%;
				height: 100%;
				background-color: #33FFCC;
				border: 1rpx solid black;
				.right_title{
					width: 100%;
					height: 20%;
					background-color: #FF9900;
					text-align: center;
					border-bottom: 1rpx solid black;
				}
			}
		}
	}
</style>