uni-app动态绑定类

电玩女神 2023-06-21 10:28 22阅读 0赞

html:

<view class="money">
    		<view :class="[isActive === index ? 'active' : 'one']" v-for="(item,index) in numberList" :key="index"  @tap="changeClass(index)">
    			<view class="top">
    				{
       {item.num}}
    			</view>
    			<view class="bottom">
    				{
       {item.demon}}
    			</view>
    		</view>
    	</view>

js:

css:

.one{
    		width:210upx;
    		height:186upx;
    		background:#1F1E24;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		.top{
    			font-size:48upx;
    			font-family:PingFang SC;
    			font-weight:bold;
    			color:rgba(255,255,255,1);
    		}
    		.bottom{
    			font-size:26upx;
    			color:rgba(226,225,221,1);
    		}
    	}
    	.active{
    		width:210upx;
    		height:186upx;
    		background:#FFE093;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		.top{
    			font-size:48upx;
    			font-family:PingFang SC;
    			font-weight:bold;
    			color:#1F1E24;
    		}
    		.bottom{
    			font-size:26upx;
    			color:#666666;
    		}
    	}

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212145701543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA==,size_16,color_FFFFFF,t_70