uniapp 兼容app和微信程序的动态class 的实现

1.app可以用addClass 在方法中处理。但是这种方法不兼容微信小程序

2.实现方法,在data 中定义变量,根据条件判断使用哪一个样式值。

data() {
			return { 
				itemContent:"midContent midContentColor1",
				itemContent1:"midContent midContentColor2",
			}
		},

3.

​
<view class="itemMid">
      <view 
	    v-for="(nameItem,id) in processesList" :key="id"
	    :class="( (nameItem.name=='激光' && item.jgStatus==1)
	    || (nameItem.name=='折弯' &&  item.zwStatus==1)
	    || (nameItem.name=='机加' && item.jjStatus==1)
		|| (nameItem.name=='焊接' && item.hjStatus==1)
		|| (nameItem.name=='其他' && item.qtStatus==1)) ? itemContent1:itemContent"
	    v-if="(nameItem.name=='激光'&& item.jg==1) ||
	    (nameItem.name=='折弯'&& item.zw==1) || 
	    (nameItem.name=='机加'&& item.jj==1) || 
	    (nameItem.name=='焊接'&& item.hj==1) || 
	     (nameItem.name=='其他'&& item.qt==1) ">
      <view class="itemContent" 
          @click="editItem(item,nameItem.name)">
    	  {{nameItem.name}}</view>
		</view>	
</view>

​

样式:

.itemMid{
		font-size: 30upx;color: #fff;margin-top: 12upx;display: flex;flex-direction: row;
		margin-left: 5upx;
		justify-content: flex-start;
		.midContent{
			padding: 30upx;
			margin: 5upx;
			border-radius: 10upx;
			text-align: center;
		}
		.midContentColor1{
			background:  #44dd81;
		}
		.midContentColor2{
			background:  #ff557f;
		}
	}

上一篇:vue uniapp拼团列表--倒计时


下一篇:LeetCode 1116. 打印零与奇偶数