Class绑定的对象语法
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title> ???<script src="https://unpkg.com/vue"></script> ???<style type="text/css"> ???????.active { ???????????width: 64px; ???????????height: 64px; ???????????background: blue; ???????} ???????.text-danger { ???????????background: red; ???????} ???</style></head><body> ???<div id="app-1"> ???????<div v-bind:class="{ active: isActive, textDanger: hasError }"></div> ???</div> ???<script type="text/javascript"> ???????var vm1 = new Vue({ ???????????el: ‘#app-1‘, ???????????data: { ???????????????isActive: true, ???????????????hasError: false ???????????} ???????}) ???</script></body></html>最基础样式绑定，是否使用样式由后面的布尔值决定
也可以绑定一个对象，这样看起来代码更清爽一些
<div id="app-2"> ???<div v-bind:class="classObject"></div></div><script type="text/javascript"> ???var vm2 = new Vue({ ???????el: ‘#app-2‘, ???????data: { ???????????classObject: { ???????????????active: true, ???????????????‘text-danger‘: true ???????????} ???????} ???})</script>这两段代码中有个地方要特别注意一下，Bootstrap的text-danger属性分别使用了textDanger（驼峰式）和text-danger（串联式）的写法，这2种写法Vue都是支持的，唯一要注意的是使用串联式要加单引号
例如：font-size属性，在Vue里面可以写成fontSize（驼峰式）或‘font-size‘（串联式）
Class绑定的数组语法
<div id="app-3"> ???<!-- 可以用三元表达式来选择性的渲染 --> ???<div v-bind:class="[activeClass, hasError ? errorClass : ‘‘]"></div> ???<!-- 也可以在数组语法中使用对象语法 --> ???<div v-bind:class="[activeClass, { errorClass: hasError }]"></div></div><script type="text/javascript"> ???var vm3 = new Vue({ ???????el: ‘#app-3‘, ???????data: { ???????????hasError: true, ???????????activeClass: ‘active‘, ???????????errorClass: ‘text-danger‘ ???????} ???})</script>内联绑定的对象语法
<div id="app-4"> ???<div v-bind:style="{ color:activeColor, fontSize: fontSize + ‘px‘ }">双子宫殿</div></div><script type="text/javascript"> ???var vm4 = new Vue({ ???????el: ‘#app-4‘, ???????data: { ???????????activeColor: ‘red‘, ???????????fontSize: 30 ???????} ???})</script>同样内联绑定也可以绑定一个对象
<div id="app-5"> ???<div v-bind:style="styleObject">Hello, TanSea!</div></div><script type="text/javascript"> ???var vm5 = new Vue({ ???????el: ‘#app-5‘, ???????data: { ???????????styleObject: { ???????????????color: ‘green‘, ???????????????fontSize: ‘20px‘ ???????????} ???????} ???})</script>内联绑定的数组语法
<div id="app-6"> ???<div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div></div><script type="text/javascript"> ???var vm6 = new Vue({ ???????el: ‘#app-6‘, ???????data: { ???????????baseStyles: { ???????????????color: ‘blue‘, ???????????????fontSize: ‘30px‘ ???????????}, ???????????overridingStyles: { ???????????????fontFamily: ‘微软雅黑‘ ???????????} ???????} ???})</script>总体来说，样式绑定相对来说是比较简单的，只要记住语法格式就行了
Vue.js学习笔记 第二篇 样式绑定
原文地址：http://www.cnblogs.com/TanSea/p/Vue-Chapter2-StyleBind.html