v-for的嵌套循环使用【uniapp】

<template><view class="" ><view class="content" v-for="(item,index) in qqcy"><view class="box" @tap="skillIdx=index">门派：{{ item.address }} 代表：{{ item.represent }}</view>&

前端落榜生

4188人浏览 · 2022-04-12 23:34:08

前端落榜生 · 2022-04-12 23:34:08 发布

<template>
	<view class="" >
		<view class="content" v-for="(item,index) in qqcy">
			<view class="box" @tap="skillIdx=index">
				门派：{{ item.address }} 代表：{{ item.represent }}
			</view>
			<!-- 要展示的列表  item.member是根据上一层的数组循环滴-->
			<view v-if="skillIdx==index" >
				<view class="box_1" v-for="(ite, idx) in item.member">
				{{ ite }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//最外层数组
			qqcy: [
				{
					address: '羊村',
					represent: '慢羊羊',
					member: ['喜羊羊', '美羊羊', '沸羊羊', '懒羊羊', '暖羊羊']//内层数组
				},
				{
					address: '狼堡',
					represent: '灰太狼',
					member: ['红太狼', '小灰灰']
				}
			],
			skillIdx:-1,
		//点击事件要控制的参数 页面的层级都为0 所以 v-if 所在的容器隐藏了，通过这个属性来控制
		};
	},  
	onLoad() {
		  
	}, 
	methods: {}
};
</script>

<style>
	//最外层的样式
.content {
	width: 100vw;
}
.box {
	text-align: center;
	width: 98%;
	line-height: 60px;
	height: 60px;
	background-color: #36c2f1;
	margin: 10px auto;
	border-radius: 20px;
	color: black;
}
.box_1 {
	text-align: center;
	width: 89%;
	line-height: 30px;
	height: 30px;
	background-color: #1aa034;
	margin: 10px auto;
	border-radius: 20px;
	color: black;
}
</style>

效果展示：QQ录屏20220412233525-CSDN直播