打着鞏固 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>