注：此内容摘抄自：梁灏的《Vue.js实战》
注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。
DOM元素经常会动态的绑定一些class类名或style样式。
1.了解v-bind指令
它的主要用法是动态更新HTML元素上的属性。
在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，他们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑比较复杂时，使用字符串拼接较难阅读和维护，所以Vue.js增强了对class和style的绑定。
2.绑定class的几种方式
2-1.对象语法
给v-bind:class设置一个对象，可以动态的切换class
<div class="app1">
<div :class="{‘active‘:isActive}">我真的是黑色的！</div>
</div>
var app1=new Vue({
el:‘.app1‘,
data:{
isActive:true
}
});
上面的实例中，类名active依赖于数据isActive，当其为true时，div会拥有类名isActive，为false时则没有。
对象中也可以传入多个属性，来动态切换class。另外，:class 可以和普通的class共存
<div class="app2">
<div class="static" :class="classes">我本来是黑色的……</div>
</div>
var app2=new Vue({
el:‘.app2‘,
data:{
isActive:true,
error:null
},
computed:{
classes:function(){
return {
active:this.isActive && !this.error,
‘text-fail‘:this.error && this.error.type===‘fail‘
}
}
}
});
当:class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一把的那个条件多余两个时，都可以使用data或computed，上面的例子就是用使用的计算属性。
2-2.数组语法
当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表
<div class="app3">
<div :class="[isActive ? activeCls:‘ ‘,errorCls]">三元表达式</div>
</div>
var app3=new Vue({
el:‘.app3‘,
data:{
isActive:true,
activeCls:‘active‘,
errorCls:‘error‘
}
});
也可以使用三元表达式来根据条件切换class，如上。
样式error会始终应用，当数据isActive为真时，样式activeCls才会被应用。class有多个条件时，这样写会比较烦琐，可以在数组语法中使用对象语法。
<div class="app4">
<div :class="[{‘active‘:isActive},errorCls,classes]">我看看</div>
</div>
var app4=new Vue({
el:‘.app4‘,
data:{
isActive:true,
errorCls:‘error‘,
size:‘large‘,
disabled:true
},
computed:{
classes:function(){
return [
‘btn‘,
{
[‘btn-‘+this.size]:this.size!==‘‘,
[‘btn-disabled‘]:this.disabled
}
]
}
}
});
当然，与对象语法一样，也可以使用data、computed和methods三种方法，如上。
2-3.在组件上使用
组件后面会讲，这里就不介绍了，跳过。
3.绑定内联样式
使用v-bind:style（即 :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接现在元素上写CSS
<div class="app5">
<div :style="{‘color‘:color,‘fontSize‘:fontSize+‘px‘}">文本</div>
</div>
var app5=new Vue({
el:‘.app5‘,
data:{
color:‘red‘,
fontSize:14
}
});
CSS属性名称使用驼峰命名或短横分格。
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里
<div class="app6">
<div :style="styles">文本</div>
</div>
var app6=new Vue({
el:‘.app6‘,
data:{
styles:{
color:‘red‘,
fontSize:14+‘px‘
}
}
})
在实际业务中， :style 的数组语法并不常用，因为往往可以写在一个对象里面；而较常用的应当是计算属性。
另外，使用 :style 时，Vue.js会自动给特殊的CSS属性名称增加前缀，比如transform。
最后给出今天要用到的所有css
<style type="text/css">
.active{
color:blueviolet;
border: 2px solid #00f;
}
.error{
color:red;
}
.static{
background: #0f0;
}
.btn{
outline: dashed;
}
.btn-large{
background:#ddd ;
}
.btn-disabled{
text-decoration:underline ;
}
</style>
注：此内容摘抄自：梁灏的《Vue.js实战》
