uniapp如何設定動態樣式

uniapp設定動態樣式的方法：1、使用者點擊按鈕後動態切換按鈕選取樣式；2、為標籤渲染多種顏色，程式碼為【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。

本教學操作環境：windows7系統、uni-app2.5.1版本，此方法適用於所有品牌電腦。

推薦（免費）：uni-app開發教學課程

uniapp設定動態樣式的方法：

場景一：使用者點擊按鈕後動態切換按鈕選取樣式（如圖）

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

註：需要注意的就是一個標籤裡盡量不要同時用靜態class與動態class，可能會造成相容問題。最好只是用一種方式的，如上程式碼為了實現動態改變樣式只用了:class

錯誤示範：已上線

#場景二：給標籤渲染多種顏色（如圖）

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

以上是uniapp如何設定動態樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！