uni-app 动态绑定class 和 style

// 绑定单个内联样式
    
    
    
    
    
// 绑定单个class属性
    
    
    
    
    
    
    
    


        
// 数组的方式,直接绑定多个 class 属性
    
// 绑定多个class属性
    
    
    // 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
   
   
   // 数组对象结合
   :class="[{ active: isActive }, 'sort']"
// 复杂情况
{{title}}

你可能感兴趣的:(uni-app 动态绑定class 和 style)