uniapp tab切换--双重for循环

<view class="list">
				<!-- 这是tab栏 -->
				<view class="tab-list">
					<view class="venue" v-for="(item,index) in arr" :key="index"
						:class="isActive===index? 'activeColor':''" @click="btn(index)">{{item.type}}</view>
				</view>
				<!-- 这是内容栏 图片引入方法是封装的---自己更换一下就可以 -->
					<view class="single" v-for="(el,index) in arr1" :key="index" v-if="isActive===index" >
						<image :src="$getimg(el.img)" class="si-left" />
						<view class="si-right">
							<view class="ri-tit">{{el.title}}</view>
							<view class="des" v-for="(els,indexs) in el.arr2" :key="indexs">
								<image :src="$getimg(els.img2)" style="width: 14px; height: 14px;" />
								<text>{{els.tit}}</text>	
							</view>
						</view>
						
					</view>
			</view>

export default {
		data() {
			return {
				isActive: 0,
				arr: [{
						type: '活动列表'
					},
					{
						type: '场馆列表'
					}
				],  //这是tab栏
				arr1: [{
					img: 'shiwu.png',
					title: "餐桌上的美食",
					arr2:[{img2:'hddz.png',tit:'通天路594号'},
					      {img2:'hdsj.png',tit:'2021.04.10 10:00 - 2021.05.10 10:00'},
						  {img2:'hdfzr.png',tit:'入选人数:2/报名人数:3'},
					]
				},
				{
					img: 'tuhu.png',
					title: "餐桌上的美食",
					arr2:[{img2:'hddz.png',tit:'通天路594号'},
					      {img2:'hdsj.png',tit:'2021.04.10 10:00 - 2021.05.10 10:00'},
						  {img2:'hdfzr.png',tit:'入选人数:2/报名人数:3'},
					]
				}
				] //这是内容栏
			}
		},
	
		methods: {
			btn(index) {
				this.isActive = index;
			},
		
	}
</script>

<style scoped>

	.ri-tit {
		font-size: 14px;
	}

	.single {
		display: flex;

		width: 92%;
		margin: 10px auto;
	}

	.des {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #999999;
		margin-top: 5px;
	}

	.des image {
		margin-right: 2px;
	}
	.des text{
		height: 9px;
		line-height: 9px;
		width: 206px;
	
	}

	.si-left {
		width: 115px;
		height: 80px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.overall {
		height: 100vh;
		width: 100%;
		background: #eaeded;
	}

	.box {
		width: 100%;
		background: #ffffff;
		overflow: hidden;
	}

	.activeColor {
		background: #fff;
		font-size: 14px;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #222222;
		border-radius: 5.5px;
	}


	.tab-list {
		width: 153px;
		height: 33.5px;
		background: #EDEDED;
		border-radius: 8.5px;
		margin: 10px auto 10px auto;
		/* overflow: hidden; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 5px;
	}

	.venue {
		width: 70px;
		margin: 3px;
		text-align: center;
		height: 28px;
		font-size: 12.5px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #222222;
		line-height: 28px;
	}

</style>