1、 绑定class的2种方式

   1.1、对象语法：

<div id="app">
     <div :class="{'active':isActive}"></div>
</div>

 var app=new Vue({
     el:"#app",
     data:{
         isActive:true
     }
 })
   

   注意： 当class的表达式过长或者逻辑复杂时，可以绑定一个计算属性

<div id="app">
     <div :class="classes"></div>
</div>

 var app=new Vue({
     el:"#app",
     data:{
         isActive:true,
         error:null
     }
     computed:{
         classes(){
             return {
                 'active':this.isActive && !this.error,
                 'text-fail':this.error && this.error.type=== 'fail'
             }
         }
     
     }
 })

   1.2、数组语法

<div id="app">
     <div :class="[activeCls,errorCls]"></div>
</div>

 var app=new Vue({
     el:"#app",
     data:{
         activeCls:'active',
         errorCls:'error'
     },
    
 })

  注意： 也可以使用三元表达式来根据条件切换class

<div id="app">
     <div :class="isActive? : activeCls : errorCls"></div>
</div>

 var app=new Vue({
     el:"#app",
     data:{
         isActive:true,
         activeCls:'active',
         errorCls:'error'
     },
    
 })

2、绑定内联样式

<div id="app">
     <div :style="{'color':color,'fontSize':fontSize +'px'}">文本</div>
</div>

 var app=new Vue({
     el:"#app",
     data:{
         color:'red',
         fontSize:14
     },
    
 })

   补充：

1、在组件上绑定样式，是绑定在该组件的根元素上。
2、绑定内联样式可以使用数组语法