uni-app学习

实现菜单切换的逻辑（只有两个切换项的情况）：

效果如下图

两个项目的情况考虑用布尔值来控制：

<template>
	<view>
		<view class="flex">
			<button :class="['margin',{'active':isActive}]" @tap="handleTap(true) ">菜单1</button>
			<button :class="['margin',{'active':!isActive}]"   @tap="handleTap(false)">菜单2</button>
		</view>
		<view  class="box margin flex" v-if="isActive">内容1</view>
		<view class="box margin flex " v-if="!isActive" >内容2</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			isActive:true
			}
		},
		methods: {
		handleTap(bool){
			this.isActive = bool;
		}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.active{
		background-color: #C0C4CC;
	}
	.margin{
		margin: 10upx;
	}
	.box{
		height: 100px;
		background-color: #9692cc;
		border-radius: 10px;
	}
</style>

---

提示：学习uni-app的笔记