Vue实现选项卡效果

最新推荐文章于 2024-05-07 08:44:06 发布

我吃皮蛋

最新推荐文章于 2024-05-07 08:44:06 发布

阅读量484

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43122566/article/details/129651841

版权

1.选项卡切换

<view class="widthleft60 between">
	<view @click="num=1" :class="num==1?'active':''">
		今日订单
	</view>
	<view @click="num=2" :class="num==2?'active':''">
		月订单量
	</view>
	<view @click="num=3" :class="num==3?'active':''">
		总订单量
	</view>
</view>

2.选项卡内容

<view v-if="num==1">
	<view>
		今日订单选项卡内容	
	</view>
</view>

<view v-if="num==2">
	<view>
		今日订单选项卡内容	
	</view>
</view>

<view v-if="num==3">
	<view>
		今日订单选项卡内容	
	</view>
</view>

3.js中data填写

data() {
	return {
		num: 1,
	};
},

4.style中相应配置

.active {
	border-bottom: 2px solid #54bcbd;
	padding-bottom: 20rpx;
}
.widthleft60{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
}
.between{//弹性设置左右布局
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

以上就是vue基本选项卡填写内容可以实现流畅切换！