使用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开发等。

微信号：zstxinghui

欢迎大家使用我们的软件：

• ● 在线图片编辑器
• ● 小程序： 家政小程序，陪诊小程序
• ● 开源的网站内容管理系统： 小木CMS内容管理系统

更欢迎大家下载我们的APP：

• ● 松鼠天气：简洁的天气预报，日历工具

公众号