在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。
除了设置 class 我们在项目中也经常设置元素的内联样式 style，在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除，利用 css() 方法设置/获取元素的内联样式。
那么在 vue 中 我们如何处理这类的效果呢？在 vue 中我们可以利用 「v-bind」 指令绑定我们的 class 与 style，接下来我们看看 vue 中给我们提供了哪些绑定它们的方式。
对象语法绑定 Class
Tab 页的切换是我们最常见的一个效果之一，如何让选中的标题高亮，常用的方式就是动态切换 class 。
从例子中我们看到 active 这个 class 是否存在取决于后面的表达式是真值或者假值，当为真值时 active 类被添加到元素上否则没有。
我们不仅可以添加一个 class，我们还可以同时添加多个 class，并且还可以与原有的 class 共存。
渲染结果为：
我们也可以直接绑定一个数据对象
渲染结果与上面相同
除此之外，我们还可以使用计算属性去绑定元素的 class。
数组语法绑定 Class
Vue 中还支持我们给元素利用数组的方式添加 class，我们修改上面对象添加 class 的例子。
上面方式我们绑定了固定不变的，如果我们需要动态的切换 class 怎么办呢？ 我们可以利用三元表达式或者在数组中使用对象语法。
//三元表达式 //数组中使用对象语法
对象语法绑定 Style
绑定内联样式时的对象语法，看起来非常像 css，但他其实是一个 Javascript 对象，我们可以使用驼峰式或者短横线分隔命名。
对象语法
与 class 类似我们也可以使用数据对象的方式绑定。
对象语法
数组语法绑定 Style
Vue 允许我们同时绑定多个样式对象作用于同一个对象上。
对象语法
总结
本文主要是对 Vue 绑定 class 与 style 方式进行学习与梳理。
Vue 给我们提供了对象绑定和数组绑定 class 与 style 的方式，但是选择哪种绑定方式，在我看来都是在于个人喜好。
我个人更倾向于数据对象的方式去绑定，因为它会让我们的模版看起来更加简介，易于后期代码的维护。
