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;