uni-app 动态绑定class 和 style

// 绑定单个内联样式
    <view :style="{'display':config.isHaveSearch ? 'block':'none'}" ></view>
    <view :style="{color:item.age<18?'#ccc':''}"></view>
    
    <view :style="{ color: activeColor, fontSize: fontSize + 'px' }"></view>
    <view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]"></view>

// 绑定单个class属性
    <view :class="{ 'active': isActive }" ></view>
    <view :class="{'active':isActive==index}"></view>
    
    <view :class="{ active: isActive }"></view>
    <view :class="{ active: isActive, 'text-danger': hasError }"></view>
    <view :class="[activeClass, errorClass]"></view>
    <view :class="[isActive ? activeClass : '', errorClass]"></view>
    <view :class="[{ active: isActive }, errorClass]"></view>


    <view :class="cosi==index ? 'select':'unselect'"></view>    

// 数组的方式，直接绑定多个 class 属性
    <view :class="['green', 'font-big','font-bold' ]" ></view>

// 绑定多个class属性
    
    <view :class="{ 'active': isActive, 'sort': isSort }"></view>
    // data 中声明
    :class="classObject"
    data() {
      return {
        classObject:{ active: true, sort:false }
      }
    }
    
    // 第三种（使用computed属性）
    :class="classObject"
    data() {
      return {
        isActive: true,
        isSort: false
      }
    },
    computed: {
      classObject: function () {
        return {
           active: this.isActive,
           sort:this.isSort
        }
    }
 

:class="[isActive,isSort]"
    data() {
       return{
          isActive:'active',
          isSort:'sort'
       }
    }
    // 数组与三元运算符结合判断选择需要的class
   <view :class="[item.name? 'lg':'sm']"></view>
   <view :class="[item.age<18? 'gray':'']"></view>
   // 数组对象结合
   :class="[{ active: isActive }, 'sort']"

// 复杂情况
<text class="title" :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style="color:red;">{{title}}</text>