Vue.js 樣式綁定 · 前端開發手冊

# Vue.js 樣式綁定 ## Vue.js class class 與 style 是 HTML 元素的屬性，用于設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。 Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。 ## class 屬性綁定我們可以為 v-bind:class 設置一個對象，從而動態的切換 class: #### 實例 1 實例中將 isActive 設置為 true 顯示了一個綠色的 div 塊，如果設置為 false 則不顯示： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <div v-bind:class="{ active: isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script> </body> </html> ~~~ 以上實例 div class 為： `<div class="active"></div>` 我們也可以在對象中傳入更多屬性用來動態切換多個 class 。 #### 實例 2 text-danger 類背景顏色覆蓋了 active 類的背景色： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: true } }) </script> </body> </html> ~~~ 以上實例 div class 為： ~~~ <div class="static active text-danger"></div> ~~~ 我們也可以直接綁定數據里的一個對象： #### 實例 3 text-danger 類背景顏色覆蓋了 active 類的背景色： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } } }) </script> </body> </html> ~~~ 實例 3 與實例 2 的渲染結果是一樣的。此外，我們也可以在這里綁定返回對象的計算屬性。這是一個常用且強大的模式： ~~~ 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 ，實例如下： #### 實例 5 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> <script> new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script> </body> </html> ~~~ 以上實例 div class 為： `<div class="active text-danger"></div>` 我們還可以使用三元表達式來切換列表中的 class ： #### 實例 6 errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類： ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .text-danger { width: 100px; height: 100px; background: red; } .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, activeClass: 'active', errorClass: 'text-danger' } }) </script> </body> </html> ~~~ ## Vue.js style(內聯樣式) 我們可以在 v-bind:style 直接設置樣式： #### 實例 7 ~~~ <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div> </div> <script> new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30 } }) </script> ~~~ 以上實例 div style 為： `<div style="color: green; font-size: 30px;">菜鳥教程</div>` 也可以直接綁定到一個樣式對象，讓模板更清晰： ~~~ <div id="app"> <div v-bind:style="styleObject">菜鳥教程</div> </div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px' } } }) </script> ~~~ v-bind:style 可以使用數組將多個樣式對象應用到一個元素上： ~~~ <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } }) </script> ~~~ > 注意：當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測并添加相應的前綴。