注：此内容摘抄自：梁灏的《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实战》
vue.js实战学习——v-bind 及class与 style绑定
原文地址：http://www.cnblogs.com/sxdct/p/8087001.html