1, 绑定html class

1), 直接绑定

     
            isActive 为true， 则显示 active css      
      
哈哈
    
     

 

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

2), 多个值可通过对象的方式绑定: 

         
     
      
      
 哈哈 
    
     

 

data() {      return {        styleObj: {          active: true,          'demo': true        }      }    },

3), 通过computed 绑定: 

     
      
      
 哈哈哈啊
    
     

computed: {      styleObj1() {        return {          "active": this.isActive,          "demo": this.isDemo        }      }    }

4) , 数组语法

         
     
      
      
{
   { name }}
    
     

data() {      return {        isActive: true,        isDemo: true,        styleObj: {          active: true,          'demo': true        },        id: 10,        demo1: "demo11",        demo2: "demo22",        names: ['wenbronk', 'vini', 'lisa'],        stob: {          color: "red",          fontSize: "24px"        }      }    },

5), 绑定内联样式

         
     
      
      
 内敛样式 
    
     

stob: {          color: "red",          fontSize: "24px"        }