zoukankan      html  css  js  c++  java
  • 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>
    

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

    <view :class="['every-sign-item',`signstyle-${index%6}`]" v-for="(item,index) in preSignList" :key="index">{{item.name}}</view>
    
    
    .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{ ... }
    
    
  • 相关阅读:
    router-link中传值的三种方式
    JVM原理和优化
    JAVA中关于锁机制
    思考程序
    论防御式编程与攻击式编程
    BOM详解
    理解JAVASCRIPT 闭包
    用HTML5 CANVAS做自定义路径的动态效果图片!
    js制作点击会自动隐藏的导航栏(固定在在头部的)
    ++a和a++的区别。
  • 原文地址:https://www.cnblogs.com/huihuihero/p/13223405.html
Copyright © 2011-2022 走看看