uview动态class 兼容app和小程序

最新推荐文章于 2025-08-07 16:32:33 发布

原创

最新推荐文章于 2025-08-07 16:32:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #uni-app

该博客介绍了在微信小程序中处理样式和进行条件渲染的方法。通过在data中定义变量，并根据条件判断来设置不同样式的值。在模板中使用v-for和v-if指令结合条件表达式，动态地应用类名，实现内容的显示和背景颜色的切换。同时，指出addClass方法在微信小程序中不适用，提供了一种兼容的解决方案。

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

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

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


<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=