vue中 class与style样式绑定

1.class样式绑定

    .bgRed {background: red;}
    .fontRed {color: red;}

①class绑定模型数据（字符串语法）
     <h1 :class="classString"> </h1>    
     data: {
        classString: 'bgRed'
     }
    
②class绑定模型数据（对象语法）
     <h1 :class="classObj">  </h1>  
     data: {
        classObj: { bgRed : true, fontRed: false }  // {类名：是否显示}
     }

③class绑定模型数据（数组语法）
     <h1 :class="classArr"> </h1>
     data: {
        classArr: ["bgRed ", "fontRed"], //数组里面有的就显示
     }

2.style样式绑定

①style绑定模型数据（对象语法）  常用：主要使用这个
    <h1 :style="styleObj"> </h1>
    data(){
       styleObj: {color:'red', fontSize: '20px'}, // 键是CSS属性名，值CSS属性值
    }
②style绑定模型数据（数组语法） 不常用
    <h1 :style="styleArr"> </h1>
    data(){
       styleArr: [   
                 {color: 'yellow'},
                 {background: 'black'}   // 数组中是一个个对象  每个对象就是键：值即可
              ]
   }