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