How to set dynamic styles in uniapp

Uniapp method to set dynamic styles: 1. After the user clicks the button, the button is dynamically switched to select the style; 2. Render multiple colors to the label, the code is [.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}].

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

How to set dynamic styles in uniapp:

Scenario 1: After the user clicks the button, the button selection style is dynamically switched (as shown in the picture)

<view class="state-btn-content">
    <view @tap="selectState" data-state="over" :class="[whichSelected==&#39;over&#39;?&#39;state-btn-selected&#39;:&#39;state-btn-noselect&#39;]">已上线</view>
    <view @tap="selectState" data-state="pre" :class="[whichSelected==&#39;pre&#39;?&#39;state-btn-selected&#39;:&#39;state-btn-noselect&#39;]">未开始</view>
</view>
//选择状态
selectState(e){
    this.whichSelected=e.currentTarget.dataset.state
}
.state-btn-content{
    //write your style
    .state-btn-selected{ ... }
    .state-btn-noselect{ ... }
}

Note: It is important to note that try not to use the same tag at the same time Using static classes and dynamic classes may cause compatibility issues. It is best to just use one method. In the above code, in order to dynamically change the style, only use: class

Error example: Online

Scenario 2 ：Render multiple colors to labels (as shown in the picture)

<view :class="[&#39;every-sign-item&#39;,`signstyle-${index%6}`]" v-for="(item,index) in preSignList" :key="index">{{item.name}}</view>
.every-sign-item{
padding: 4rpx 16rpx;
border-radius: 24rpx;
font-size: 24rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.signstyle-0{
color: #3ac9e3;
border: 1px solid #3ac9e3;
}
.signstyle-1{
color: #fd8888;
border: 1px solid #fd8888;
}
.signstyle-2{ ... }
.signstyle-3{ ... }
.signstyle-4{ ... }
.signstyle-5{ ... }

The above is the detailed content of How to set dynamic styles in uniapp. For more information, please follow other related articles on the PHP Chinese website!