Comment définir des styles dynamiques dans Uniapp

Comment définir des styles dynamiques dans uniapp : 1. Une fois que l'utilisateur a cliqué sur le bouton, le bouton bascule dynamiquement pour sélectionner le style ; 2. Rendu plusieurs couleurs sur l'étiquette, le code est [.signstyle-0". {couleur : #3ac9e3 ; bordure : 1px solide #3ac9e3 ;}].

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé (gratuit) : Tutoriel de développement d'uni-app

Comment définir des styles dynamiques dans uniapp :

Scénario 1 : Une fois que l'utilisateur clique sur le bouton, le style de sélection du bouton est modifié dynamiquement (comme indiqué dans l'image)

<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{ ... }
}

Remarque : il Il est important de noter qu'essayez de ne pas utiliser la même balise en même temps. L'utilisation de classes statiques et de classes dynamiques peut entraîner des problèmes de compatibilité. Il est préférable de n'utiliser qu'une seule méthode. Dans le code ci-dessus, afin de modifier dynamiquement le style, utilisez uniquement : class

Exemple d'erreur : En ligne

Scénario 2 :Rendre plusieurs couleurs aux étiquettes (comme indiqué sur l'image)

<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{ ... }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!