您现在的位置:主页 > 发展 >

uniapp如何设置动态样式

标签: 日期:2020-12-21 19:12来源:未知作者:admin
uniapp设置动态样式的方法:1、用户点击按钮后动态切换按钮选中样式;2、给标签渲染多种颜色,代码为【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。 本教程操作环境:windows7系统、

  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=='over'?'state-btn-selected':'state-btn-noselect']">已上线</view> <view @tap="selectState" data-state="pre" :class="[whichSelected=='pre'?'state-btn-selected':'state-btn-noselect']">未开始</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 @click="selectState" data-state="over" class="state-btn-noselect" :class="[whichSelected=='over'?'state-btn-selected':'']">已上线</view>

  场景二:给标签渲染多种颜色(如图)

顶一下
(0)
0%
踩一下
(0)
0%
相关文章
共有人强势围观,期待你的评论!评论区
小提示: 本站的评论不需要审核,即发即显,有什么话你就尽管说吧,但不要过激哦,以免遭跨省处理!

验证码:点击我更换图片 匿名评论
最新评论