小程序多状态class 动态控制多个class 动态添加删除class

我们在小程序页面制作时通常会遇到不同状态展示不同的样式或者内容,当然如果只有2种情况最好办,直接三元运算符和 逻辑或都可以解决,但是如果是三种状态四种状态呢?遇到这种情况我是这么处理的(根据条件判断采用wx:if else),下面的小栗子是展示的4种状态。如果你有更好的方法,欢迎交流!
<view class="invoice-item-flex" id='invoice-item-state'>
   <view>审核状态</view>
   <view wx:if='{{item.state==0}}' class="state-w">{{item.stateName}}</view>
   <view wx:elif='{{item.state==1}}' class="state-d">{{item.stateName}}</view>
   <view wx:else class="{{item.state==2?'state-k':'state-y'}}">{{item.stateName}}</view>
</view> 

猜你喜欢

转载自blog.csdn.net/Taurus_0811/article/details/104552593
今日推荐