【uni app 通过 v-if 实现视图切换】

uni app 通过 v-if 实现视图切换

<template>
	<view>
		<button type="primary" @click="toggleComponent">
			视图切换
		</button>
		<!-- 列表模式_自写代码 -->
		<view v-if="showComponent">
			<view class="uni-list-ListPattern">
				<view class="uni-list-item-margin" v-for="i in data" :key="i.FID">
					<view style="display: flex; justify-content: space-between;">
						<view style="width: 20%; height: 100px;">
							<image style="width: 100%; height: 100%;" src="../../static/meinv01.png" mode="aspectFit">
							</image>
						</view>
						<view class="uni-list-item-text" style="width: 80%;">
							<text>ID：{{i.Id}}</text>
							<text>编码：{{i.Number}}</text>
							<text>名称：{{i.Name}}</text>
							<text>数量：{{i.Qty}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 宫格模式_自写代码 -->
		<view v-if="!showComponent">
			<view class="uni-list-PalaceGrid">
				<view class="uni-list-item-PalaceGrid" v-for="i in data" :key="i.FID">
					<view class="uni-list-item-margin">
						<view>
							<image class="img-attribute" src="../../static/meinv01.png" mode="aspectFit"></image>
						</view>
						<view class="uni-list-item-text">
							<text>ID：{{i.Id}}</text>
							<text>编码：{{i.Number}}</text>
							<text>名称：{{i.Name}}</text>
							<text>数量：{{i.Qty}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

				data: [{
						"Id": 10001,
						"Number": "WL00001",
						"Name": "箱体A",
						"SpecsModel": "304不锈钢，100*50，板厚T=1.0",
						"Qty": 2,
					},
					{
						"Id": 10002,
						"Number": "WL00002",
						"Name": "箱体A",
						"SpecsModel": "304不锈钢，100*100，板厚T=1.0",
						"Qty": 5,
					},
					{
						"Id": 10003,
						"Number": "WL00003",
						"Name": "箱体B",
						"SpecsModel": "镀锌板，100*300，板厚T=1.0",
						"Qty": 4,
					}
				],
				showComponent: true, // 控制组件显示状态的变量
			}
		},
		// mounted功能为页面挂载的时候自动触发
		mounted() {
			//console.log(this.data)
		},
		methods: {
			toggleComponent() {
				this.showComponent = !this.showComponent; // 切换列表/宫格组件显示状态
			}
		}
	}
</script>