第四章.vue.js、v-bind及class与style绑定（
DOM元素经常会动态地绑定一些class类名或style样式，本节将介绍使用v-bind指令来绑定class和style的多种方法。
4.1了解v-bind指令
v-bind主要用法是动态更新HTML元素上的特性。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接的方法比较难阅读与维护，所以vue.js增加了对class和style的绑定。
4.2绑定class的几种方式
4.2.1对象语法
给v-bind:class设置一个对象，可以动态切换class，例如
<div :class="{'active':'isActive'}" id="lmz"></div>
<script>
new Vue({
el:"#lmz",
data:{
active:true
}
})
tips:#lmz中可以传入多个属性，来动态切换class，另外，:class可以与class共存。当class的表达式过长或逻辑复杂时，还可以绑定一个计算属性。
4.2.2数组语法
当需要使用多个class时，可以使用数组语法。
<div id="lmz" >
<div :class="[active,noactive]"></div>
</div>
<script>
new Vue({
el:"#lmz",
data:{
actve:'btn',
noactive:'btn-success'
}
})
</script>
4.2.3在组件上使用
如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根源算上，例如声明一个简单的组件：
Vue.componet('my-component',{
template:'<p class="article">一些文本</p>
});
然后在调用这个组件时，应用上面介绍的对象语法或数组语法给组件绑定class，以对象语法为例：
<div id="lmz">
<my-component :class="{'active':'isActive'}"></my-component>
</div>
<script>
var lmz = new Vue({
el:'#lmz',
data:{
isActive:true
}
})
</script>
最终组件渲染后的结果为：
<p class="article active">一些文本</p>
解析：这种语法仅适用于自定义组件的最外层是一个根元素，否则会无效。当不满足这种条件或者需要给具体的子元素设置类名时，应当使用组件的props来传递。这些用法同样使用于下面绑定内联样式style内容。
4.3绑定内联样式
使用v-bind:style(即:style)可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS.
<div id="lmz">
<div :style="{'color':color,'fontSize':fontSize+'px'}“>文本</div>
</div>
<script>
var app = new Vue({
el:"#lmz",
data:{
color:'red',
fontSize:24
}
})
</script>
CSS属性名称使用驼峰命名（cameCase）或短横分割命名（kebab-case),渲染后的结果为：
<div style="color:red;font-size:24px">文本</div>
大多数情况下，直接写以长串的样式不便于阅读与维护，所以一般写在data或computed里，以data为例改写上面的示例：
<div id="app">
<div :style="styles"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
styles:{
color:'red',
fontSize:"24px"
}
}
})
</scipt>
应用多个样式对象时，可以使用数组语法：
<div :style="[styleA,styleB]">文本</div>
在实际业务中，:style的数组语法不常用，因此往往写在一个对象里：较为常用的是计算属性。
