HTML样式的绑定无非就Class和Style的绑定，使用Vue的时候原生的绑定形式仍然可以使用，但是既然都使用了Vue了，还是建议遵循Vue的语法规范。

一. 绑定 HTML Class

1.1 对象语法

之前我们说过，html中绑定属性的方式是使用【v-bind】，那么 class 的绑定也一样

上面代码中我们使用【v-bind】为class绑定了一个对象，对象中 active 为class的名称，样式是否生效取决于 isActive 是否为真值。

上面代码中我们为一个html绑定了多个class,但是只有 active 是生效的，因为 isport 的值为 false ，有了这样的语法之后，我可以直接通过控制数据来控制哪些样式生效。

【在属性的绑定中我们可以使用表达式或者计算属性】

上面代码中我们在class的绑定中使用了表达式，表达式是一个函数的调用，在函数中我们可以定义更加复杂的样式逻辑和样式列表。

上面代码中我们使用同样定义了一个样式对象，在计算属性逻辑中我们也可以定义更加复杂的样式列表，有了表达式和计算属性为我们的样式绑定提供了个更加强悍的功能。

---

1.2 数组语法

上面介绍了对象的语法，可以说很强悍，那么我再整理一下数组绑定样式的写法。

上面代码中通过数组的方式定义绑定了2个class属性，其实就是构成了【data】属性值到样式名称之间的映射。

我们同样也可以在数组语法中使用表达式，引用官网的一个例子

上面代码中class中始终有 errorClass ，但是 activeClass 是否添加取决于 isActive 是否为真值。

【总结！！】Class的绑定总觉得数组的形式过于繁琐，我们需要定义很多映射关系属性，所以从简洁的角度出发，建议还是使用【对象】的形式。

1.3 组件绑定Class

如果知道组件，那就看一下，不知道的就先跳过吧。

当我们为组件添加class的时候，所有的class会被添加到组件的【根元素上】面，这个根元素上面已经有了的class不会被覆盖。

我们先定义一个组件

Vue.component('hello', {    template: `        
    
            
     
Hello
        
    
    `})

接下来应用组件，并添加Class

渲染的结果如下

    
    
        
     
            
      
Hello
        
     
    
    

上面代码中，later被添加到了 hello 组件的【根节点】上，上面我们是用的原生的 Class 进行绑定的，接下来我们换成Vue的绑定形式，会发现其实效果是一样的，也是绑定到了【根节点】上面。

二. 绑定内联样式

上面介绍了Class的绑定，我再总结一下内联样式的绑定

2.1 对象语法

在Class的绑定中，对象的属性是Class名称，属性值用于判断该Class是否生效；在内联样式的绑定中，属性是【样式名】，属性值是【样式值】

    
    
       
     
BLUE
       
         
    

上面代码将样式对象直接绑定到了HTML元素中，短横线分割的命名被改成了驼峰命名，Vue1.0中这个要求是比较严格的，但是Vue2.0中支持了短横线的命名规则。

上面我们在绑定Class的时候使用了和【表达式】的形式,在内联样式中我们也来玩一下

    
    
        
     
BLUE
        
         
    

上面代码使用返回一个对象，用于内联样式，表达式就不演示了，和Class的绑定基本是一样的。

2.2 数组语法

内联样式的数组语法其实就是将对各样式对象用于一个HTML元素，数组中是一个一个的对象

    
    
        
     
BLUE
       
         
    

上面代码定义了两个返回两个样式对象，然后绑定到内联样式的数组中，最后解析成注释的那样子。总感觉数组形式的绑定挺麻烦的，反正我不大喜欢用数组进行绑定，但是在分离样式对象的时候还是挺有用的。