基于uniapp和vue.js实现折叠面板?

基于uniapp和vue.js实现折叠面板?
html:

<template>
	<view class="course">
		<view class="fold-list" v-for="(item,index) in list" :key="index">
			<view class="fold-title">
				<view class="badge">{{item.number}}</view>
				<text>{{item.title}}</text>
				<view class="arrow-icon" @click="changeContent(index);layOut(index)">
				<image v-if="item.lay_type" class="up-arrow" :src="item.imgUrl"></image>
				<image v-else class="up-arrow" :src="item.imgUrl2"></image>
				</view>
			</view>
			<view class="fold-content" v-show="item.showContent" v-for="(itemMsg,indexMsg) in item.msg" :key="indexMsg" @click="changeContentInfo(index,indexMsg)">
				
				{{itemMsg.content}}
			</view>
		</view>
	</view>
</template>

js：

<script>
	export default {
		data() {
			return {

				list: [{
						number: '1',
						title: '基本信息',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1
					},
					{
						number: '2',
						title: '推荐人及行政信息',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1
					},
					{
						number: '3',
						title: '工作经历',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1

					},
					{
						number: '4',
						title: '教育经历',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1

					},
					{
						number: '5',
						title: '项目经验',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1
					},
					{
						number: '6',
						title: '资格证书',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1
					},
					{
						number: '7',
						title: '初审意见',
						msg: [{
							content: '1'
						}, {
							content: '2'
						}, {
							content: '3'
						}, {
							content: '4'
						}],
						imgUrl: '../../static/imges/recommendFirstTrial/up-arrow.svg',
						imgUrl2: '../../static/imges/recommendFirstTrial/up-arrow2.svg',
						showContent: true,
						lay_type: 1
					},
				]
			}
		},
		methods: {
			changeContent(index) { //通过index拿到当前值
				this.list[index].showContent = !this.list[index].showContent;
			},
			changeContentInfo(index, indexMsg) {
				console.log(index, indexMsg)
			},
			layOut(index) {
				if (this.list[index].lay_type == 0) {
					this.list[index].lay_type = 1
				} else {
					this.list[index].lay_type = 0
				}
			}
		}
	}
</script>

css：

<style>
	.fold-title {
		display: flex;
		flex-direction: row;
	}

	.up-arrow {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 33rpx;
	}

	.badge {
		width: 36rpx;
		height: 36rpx;
		background-color: #FF7A45;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		color: #FFFFFF;
		margin-right: 16rpx;
		padding: 5rpx;
	}
	.arrow-icon{
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
	}
</style>

效果截图：