动态绑定class（vue、uniapp、小程序）

vue 相关代码、 小程序相关代码、 uniapp 相关代码

vue

1.1 绑定单个class

<div :class="{'active':isActive}"></div>

data() {
    
    
    return {
    
    
      isActive: true
    };
  }

渲染结果

<div class="active"></div>

1.2 绑定多个class

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

data() {
    
    
    return {
    
    
      isActive: true,
      hasError: true
    };
  }

渲染结果

<div class="activeOne activeTwo activeThree"></div>

1.3 数组与三元运算符结合判断选择需要的class

<view :class="[isActive?'active':'disActive']"></view>

data() {
    
     return {
    
    
      isActive: false,
    };
  }

渲染结果

<view class="disActive"></view>

uniapp

:class="[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]"

<view class="hotVal" :class="[ {'oneTxt': this.indexs==8}]"></view>

渲染结果

<view class="hotVal oneTxt"></view>

小程序

<view class="{
    
    { 表达式?'A':'B' }}" ></view>

<view class="container">
  <view>微信小程序动态绑定样式测试</view>
  <!-- border类给按钮添加了蓝色边框，根据data中的属性isRed，选择按钮的背景色 -->
  <button class="border {
    
    { isRed?'red':'green' }}">按钮</button>
</view>

  data: {
    
    
    isRed: true
  }

.border {
    
    
  border: 10rpx solid blue;
  margin-top: 50rpx;
}
 
.red {
    
    
  background-color: red;
}
 
.green {
    
    
  background-color: green;
}