4.1 了解 V-bind指令
在之前，我们已经了解过v-bind的基本用法和以及它的语法糖，主要用法是动态更新HTML元素上的属性。
在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是HTML的属性，因此可以使用V-bind指令。我们只需要v-bind计算出表达式最终的字符串就可以了，不过有时候表达式的逻辑比较复杂，使用字符串拼接方法难以阅读和维护，所以Vue.js加强了对class和style的绑定。
4.2 绑定class的几种方式
4.2.1 对象语法
给 v-bind:class 设置一个对象，可以动态的切换class，例如:
<body>
<div id="app">
<div :class="{'active':'isActive'}" ></div>
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
isActive:true;
}
})
</script>
</body>上例中，类名active依赖于数据isActive，当其为true时，div会拥有类名active，为false时，则没有。
当class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个的时候，都可以使用data或者computed。
4.2.2 数组语法
当需要多个class的时候，可以使用数组语法，给class绑定一个数组，应用一个class列表 ，也可以用三元表达式根据条件来切换class。
三元运算符:
如名字表示的三元运算符需要三个操作数。
语法是 条件 ? 结果1 : 结果2;
这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。使用计算属性给元素动态设置类名，在业务中经常遇到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或者逻辑复杂，硬尽可能的使用计算属性。
4.3 绑定内联样式
使用v-bind：style（即：style）可以给元素绑定内联样式，
方法和：class相似，也有对象语法和数组语法，看起来很像直接在元素上写css。
<body>
<div id="app">
<div :style="{'color':color,'fontSize'；fontSize+'px'}">文本</div>
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
color:'red',
fontSize:15
}
})
</script>
</body>css属性名称使用驼峰命名，或者短横分隔命名。
大多数情况下，直接写一长串的样式不利于阅读和维护，所以一般写在data或者computed里，以data为例子，改写上面的例子。
<body>
<div id="app">
<div :style="styles">文本</div>
</div>
<script src="img/js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
styles:{
color:'red',
fontSize:15
}
}
})
</script>
</body>