uniapp Class动态绑定

参考文档

1. 直接使用绑定

 <!--  直接使用绑定 -->
<view :class="'customClass'"> 我是自定义的数据1111 </view>

// CSS 样式
.customClass{
   background-color: orange;
}

2. 绑定对象

 <!-- 绑定对象 -->
 <view :class="{ 'customClass' : true }"> 我是自定义的数据2222 </view>

// CSS 样式
.customClass{
   background-color: orange;
}

3. 绑定数据对象, 并将数据放在 data 中

 <!-- 绑定数据对象, 并将数据放在 data 中 -->
 <view :class="classObj"> 我是自定义的数据3333 </view>

// data
data() {
     return {       
         classObj: {
             customClass: true
         },
    }
},

// CSS 样式
.customClass{
   background-color: orange;
}

4. 三元表达式来绑定对象

 <!--  三元表达式来绑定对象 -->
 <view :class="[isAction ? 'customClass' : 'customBlue', 'customRight' ] "> 我是自定义的数据5555 </view>

// data
data() {
    return {
        isAction: true,
       }
}

// Css 样式
    .customRight {
        text-align: right;
    }

    .customBlue {
        background-color: blue;
    }

    .customClass {
        background-color: orange;
    }

5. 计算属性来绑定对象

<!--  计算属性来绑定对象 -->
<view :class="classComputed">我是自定义的数据6666</view>

// 计算属性
computed: {
    classComputed() {
         return {
            'customClass': true
            }
        },
}

// CSS 样式
.customClass {
    background-color: orange;
}

6. 用方法绑定对象

<!--  用方法绑定对象 -->
<view :class="{'customClass': compare()} ">我是自定义的数据888</view>

        // 方法
        methods: {
            compare() {
                let a = 5
                if (a % 2 == 1) {
                    return true
                } else {
                    return false
                }
            },
         }