uniapp設(shè)置動(dòng)態(tài)樣式的方法：1、用戶點(diǎn)擊按鈕后動(dòng)態(tài)切換按鈕選中樣式；2、給標(biāo)簽渲染多種顏色，代碼為【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。

本教程操作環(huán)境：windows7系統(tǒng)、uni-app2.5.1版本，該方法適用于所有品牌電腦。

推薦（免費(fèi)）：uni-app開發(fā)教程

uniapp設(shè)置動(dòng)態(tài)樣式的方法：

場(chǎng)景一：用戶點(diǎn)擊按鈕后動(dòng)態(tài)切換按鈕選中樣式（如圖）

<view class="state-btn-content">     <view @tap="selectState" data-state="over" :class="[whichSelected=='over'?'state-btn-selected':'state-btn-noselect']">已上線</view>     <view @tap="selectState" data-state="pre" :class="[whichSelected=='pre'?'state-btn-selected':'state-btn-noselect']">未開始</view> </view> //選擇狀態(tài) selectState(e){     this.whichSelected=e.currentTarget.dataset.state } .state-btn-content{     //write your style     .state-btn-selected{ ... }     .state-btn-noselect{ ... } }

注：需要注意的就是一個(gè)標(biāo)簽里盡量不要同時(shí)用靜態(tài)class與動(dòng)態(tài)class，可能會(huì)造成兼容問題。最好只是用一種方式的，如上代碼里為了實(shí)現(xiàn)動(dòng)態(tài)改變樣式只使用了:class

錯(cuò)誤示范：<view @click="selectState" data-state="over" class="state-btn-noselect" :class="[whichSelected=='over'?'state-btn-selected':'']">已上線</view>

場(chǎng)景二：給標(biāo)簽渲染多種顏色（如圖）

<view :class="['every-sign-item',`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{ ... }