場景一：用戶點擊按鈕后動態切換按鈕選中樣式(如圖)

已上線

未開始

//選擇狀態

selectState(e){

this.whichSelected=e.currentTarget.dataset.state

}

.state-btn-content{

//write your style

.state-btn-selected{ ... }

.state-btn-noselect{ ... }

}

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

錯誤示范：已上線

場景二：給標簽渲染多種顏色(如圖)

{{item.name}}

.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动态修改样式_uniapp样式动态绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。