## class與style綁定 Vue.js v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。 * 我們可以為 v-bind:class 設置一個對象，從而動態的切換 class:其中isActive為布爾類型數據。 ~~~ <div v-bind:class="{ active: isActive }"></div> //我們也可以在對象中傳入更多屬性用來動態切換多個 class ,可以用三目判斷 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> ~~~ * 直接綁定數據里的一個對象 ~~~ //直接傳入對象類型，可以是計算屬性返回的對象類型 <div id="app"> <div v-bind:class="classObject"></div> </div> new Vue({ el: '#app', data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } } }) ~~~ * 一個數組傳給 v-bind:class ~~~ <div v-bind:class="[activeClass, errorClass]"></div> //傳入的數組中的都是邊框 注意 data:{ activeClass:'active', errorClass:'text-danger' } //我們還可以使用三元表達式來切換列表中的 class ： <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> ~~~ * style(內聯樣式) 我們可以在 v-bind:style 直接設置樣式： ~~~ <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div> </div> //也可以直接綁定到一個樣式對象，讓模板更清晰 <div v-bind:style="styleObject">菜鳥教程</div> data: { styleObject: { color: 'green', fontSize: '30px' } } //可以使用數組將多個樣式對象應用到一個元素上 <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div> baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } ~~~