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