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;
}
.signst
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; } .signst