So legen Sie dynamische Stile in Uniapp fest

So legen Sie dynamische Stile in Uniapp fest: 1. Nachdem der Benutzer auf die Schaltfläche geklickt hat, wird die Schaltfläche dynamisch umgeschaltet, um den Stil auszuwählen. 2. Rendern Sie mehrere Farben für das Etikett. Der Code lautet [.signstyle-0{color: #; 3ac9e3;border: 1px solid #3ac9e3; }].

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So legen Sie dynamische Stile in Uniapp fest:

Szenario 1: Der Benutzer klickt auf die Schaltfläche und wechselt dynamisch den ausgewählten Stil der Schaltfläche ( wie im Bild gezeigt)

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

Hinweis: Es ist wichtig zu beachten, dass Sie versuchen sollten, statische Klassen und dynamische Klassen nicht gleichzeitig in einem Tag zu verwenden, da dies zu Kompatibilitätsproblemen führen kann. Um den Stil dynamisch zu ändern, verwenden Sie im obigen Code am besten nur: class

Fehlerbeispiel: d3e39d69d2bea08df6ac11b8dab3feceOnlinede5f4c1163741e920c998275338d29b2

Szenario 2: Rendern Sie mehrere Farben auf dem Etikett (wie Bild)

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

Das obige ist der detaillierte Inhalt vonSo legen Sie dynamische Stile in Uniapp fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!