uniapp設置動態樣式的方法：1、用戶點擊按鈕后動態切換按鈕選中樣式；2、給標簽渲染多種顏色，代碼為【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。
本教程操作環境：windows7系統、uni-app2.5.1版本，該方法適用于所有品牌電腦。
uniapp設置動態樣式的方法：
場景一：用戶點擊按鈕后動態切換按鈕選中樣式（如圖）
<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>
//選擇狀態
selectState(e){
this.whichSelected=e.currentTarget.dataset.state
}
.state-btn-content{
//write your style
.state-btn-selected{ ... }
.state-btn-noselect{ ... }
}注：需要注意的就是一個標簽里盡量不要同時用靜態class與動態class，可能會造成兼容問題。最好只是用一種方式的，如上代碼里為了實現動態改變樣式只使用了:class
錯誤示范：
<view @click="selectState" data-state="over" class="state-btn-noselect" :class="[whichSelected=='over'?'state-btn-selected':'']">已上線</view>
場景二：給標簽渲染多種顏色（如圖）
<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{ ... }
