Bootstrap

uni、vue3、vant4——tab切换栏

案例演示

在这里插入图片描述

案例代码

<template>
	<view>
		<van-tabs v-model:active="active" @click-tab="onClickTab">
			<van-tab v-for="(item,index) in state.tabList" :title="item.name" :name = "item.id">	 </van-tab>
		</van-tabs>
	</view>
</template>

<script setup>
	const state = reactive({
		tabList: [{
			id:1,
			name: '全部订单'
		}, {
			id:2,
			name: '未到店'
		}, {
			id:3,
			name: '已到店'
		}]
	})
	// 点击切换栏
	const active = ref(0);
	const onClickTab = ({
		title,name
	}) => {
		console.log("打印",title,name);
	}
</script>


<style lang="scss" scoped>
</style>

参考网址

vant4——Tab标签页
https://vant-contrib.gitee.io/vant/#/zh-CN/tab

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;