uview动态class 兼容app和小程序

最新推荐文章于 2024-02-23 08:55:10 发布

Listest

最新推荐文章于 2024-02-23 08:55:10 发布

阅读量986

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app vue 文章标签：微信 uni-app

本文链接：https://blog.youkuaiyun.com/Listest/article/details/121302908

uni-app 同时被 2 个专栏收录

24 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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