使用VUE3组合式API开发让代码变得更加的简洁。

用vue3实现的这个tab效果

<template>
	<view>
		<view class="menu" >
			<view :class="current==0 ? 'cur':'' " @tap="clickfn(0)">全部</view>
			<view :class="current==1 ? 'cur':'' " @tap="clickfn(1)">未支付</view>
			<view :class="current==2 ? 'cur':'' " @tap="clickfn(2)">进行中</view>
			<view :class="current==3 ? 'cur':'' " @tap="clickfn(3)">已完成</view>
			<view :class="current==4 ? 'cur':'' " @tap="clickfn(4)">已取消</view>
			<view :class="current==5 ? 'cur':'' " @tap="clickfn(5)">已退款</view>
		</view>
		<swiper :current="current" ref="swiper" @change="changefn">
			
			<swiper-item>
				<view>a</view>
			</swiper-item>
			<swiper-item>
				<view>b</view>
			</swiper-item>
			<swiper-item>
				<view>c</view>
			</swiper-item>
			<swiper-item>
				<view>d</view>
			</swiper-item>
			<swiper-item>
				<view>e</view>
			</swiper-item>
			<swiper-item>
				<view>f</view>
			</swiper-item>


		</swiper>
	</view>
</template>

<script setup>

	import { ref } from 'vue';
	const current = ref(0);
	const clickfn = (pos)=>{
		current.value=pos
	}
	const changefn=(e)=>{
		current.value = e.detail.current
	}
	

</script>

创业举步维艰，感谢各位支持

欢迎大家阅读我的创业笔记，如果你觉得这篇写得不错的话，可以关注我的公众号： 成长创业笔记 第一时间查阅我们的文章！感谢大家的支持。

欢迎大家下载使用我们的安卓APP：

• ● 松鼠驾考：驾考刷题APP，新版的驾考题目内容持续更新。
• ● 松鼠天气：简洁的天气预报，日历工具
• ● 加我微信：zstxinghui

成长创业笔记