在日常开发中，我们关于应用界面的处理无外乎两个方面：数据和样式。
HTML页面关于样式的设置，我们总所周知就是使用class和style属性来实现动态样式的效果。
（1）class绑定
:class="xxx"（xxx是vm中定义的变量名称（可变数据），如果使用’xxx’表示的是固定值字符串）
xxx的取值范围如下：
表达式是字符串：‘classA’表达式是对象：{classA:isA,classB:isB}表达式是数组（不常用）：['classA',变量名称]（2）style绑定
常用写法:style="{ color: activeColor, fontSize: fontSize + 'px' }，其中activeColor、fontSize 是data属性，如果涉及的样式中含有-使用驼峰命名规则
（3）代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .classA { color: red; } .classB { background: blue; } .classC { font-size: 20px; } .classD { font-family: 隶书; } </style> </head> <body> <div id="app"> <h2>1. class绑定: :class='xxx'</h2> <p :class="'classD'">设置固定的样式</p> <p class="classA" :class="myClass">xxx是字符串,myClass是data属性中定义变量,有追加效果</p> <p class="classD" :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p> <p :class="['classA', myClass]">xxx是数组</p> <h2>2. style绑定</h2> <p :style="{color:activeColor, fontSize:fontSize+'px'}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p> <button @click="update">更新</button> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { myClass: 'classB', hasClassA: true, hasClassB: false, activeColor: 'deeppink', fontSize: 20 }, methods: { update () { this.myClass = 'classC' this.hasClassA = !this.hasClassA this.hasClassB = !this.hasClassB this.activeColor = 'green' this.fontSize = 30 } } }) </script> </body> </html>