uni、vue3、vant4——tab切换栏

最新推荐文章于 2024-05-09 18:07:05 发布

耶啵奶膘

最新推荐文章于 2024-05-09 18:07:05 发布

阅读量787

点赞数

文章标签：前端 vue.js uni-app

本文链接：https://blog.csdn.net/xulihua_75/article/details/129944397

版权

案例演示

在这里插入图片描述

案例代码

<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>