打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究，相比前一篇的 demo，本次内容多了各种样式在里面，变得稍微花哨了些，话不多说，直接上代码吧：
<html> <head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { font-family: Times, "Times New Roman", serif;} .static.active {color: green; font-size: 35px;} div.text-danger {color: red;font-size: 25px;} div.active {color: blue;font-family: Verdana;} </style> <script src="./vue.min.js"></script> </head> <body> <div id="app"> <!-- Create an instance of the todo-item component --> <todo-item></todo-item> </div> <div class="static" v-bind:class="{ active: isActive, \'text-danger\': hasError }"> <p>class property set.</p> </div> <div id="app3" v-bind:class="[activeClass,errorClass]"> <p>group class property set.</p> </div> <div id="app4" v-bind:class="[isActive ? \'active\' : \'text-danger\']"> <p>三元表达式加样式</p> </div> <div id="app5"> <my-component v-bind:class="{ active: isActive }"></my-component> </div> <div id="app6"> <p v-bind:style="{ color: activeColor, fontSize: fontSize + \'px\' }">绑定内联样式</p> <p v-bind:style="styleObject">对象样式绑定</p> </div> <script> Vue.component(\'todo-item\', { template: \'<p>todo test.</p>\' }) // 一定要实例化才能用 var app = new Vue({ el: \'#app\' }) // 用类选择器构造一个Vue对象并绑定额外的class属性 var app2 = new Vue({ el: \'.static\', data: { isActive: false, hasError: true } }) // 数组语法加 class (因为是从下往上拿样式，所以text-danger的color样式被覆盖) var app3 = new Vue({ el: \'#app3\', data: { activeClass: \'active\', errorClass: \'text-danger\' } }) var app4 = new Vue({ el: \'#app4\', data: { isActive: true } }) Vue.component(\'my-component\',{ template: \'<p class="static">在已经定义好样式的自定义组件上加样式</p>\' }) var app5 = new Vue({ el: \'#app5\', data: { isActive: true } }) // 绑定内联样式 var app6 = new Vue({ el: \'#app6\', data: { activeColor: \'#FF00FF\', fontSize: 30, styleObject: { color: \'#585858\', fontSize: \'25px\' } } }) </script> </body> </html>