uniapp动态修改样式_uniapp如何设置动态样式

uniapp设置动态样式的方法：1、用户点击按钮后动态切换按钮选中样式；2、给标签渲染多种颜色，代码为【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。

本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。

场景一：用户点击按钮后动态切换按钮选中样式(如图)

已上线

未开始

//选择状态

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