VUE之动态绑定class

最新推荐文章于 2025-06-11 19:50:48 发布

开发路上的AZhe

最新推荐文章于 2025-06-11 19:50:48 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏：我对vue有初心

本文链接：https://blog.youkuaiyun.com/qq_43379916/article/details/111479404

我对vue有初心专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种在小程序中实现不同订单状态切换的方法，并展示了如何通过条件判断为元素绑定不同的样式类，以达到视觉上的状态区分效果。具体实现了包括全部、待支付、待配送、配送中及待评价在内的多种订单状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="orders-start-view">
		//单个对象形式
		//有多个以，号隔开
		//例如：{'active-order-start':currentIndex==0,'stoy'}
		<view :class="{'active-order-start':currentIndex==0}"
			@click="swicthState(0)">
		  	    全部
		</view>
		//单个数组形式
		<view :class="[currentIndex==1 && 'active-order-start']" 
			@click="swicthState(1)">
				待支付
		</view>
		<view :class="[currentIndex==2 && 'active-order-start']"
			@click="swicthState(2)">
				待配送
		</view>
		//单个数组形式2
		//多个数组形式以逗号隔开
		//例如：[{'active-order-start':currentIndex==3},'stoy']
		<view :class="[{'active-order-start':currentIndex==3}]"
			@click="swicthState(3)">
				配送中
		</view>
		<view :class="[currentIndex==4 && 'active-order-start']"
			@click="swicthState(4)">
			    待评价
		</view>
</view>