一、前言

　　前端開發中有三大件：HTML、CSS、JavaScript，在前面的學習中，不管是學習 Vue 的指令系統還是 Vue 的事件修飾符，主要還是針對的是我們在前端開發中的 JavaScript 這一塊，而在實際的開發中必定會需要涉及到對於頁面佈局的設計。即使你採用的是使用第三方的 UI 元件，當我們實際開發中時，還是需要自己寫一些樣式去滿足自己的需求，如何實現在 Vue 中對元素設定樣式則是本章學習的重點

 二、乾貨合集

　　我們知道，為頁面的元素設定樣式主要有以下的三種方式：

　　a）內聯樣式（行內樣式）：即我們直接在標籤元素的 style 屬性中設定樣式，設定的樣式只能作用於當前的元素

　　b）內部樣式（內嵌樣式）：即我們在頁面的 head 標籤中使用 style 標籤設定的 CSS 樣式，它可以應用於當前的整個頁面

　　c）外部樣式：即我們在需要使用樣式的頁面的 head 標籤中通過 link 匯入一個 css 樣式檔案，或者，我們也可以使用 @import 關鍵字在 style 標籤中引入 CSS 樣式檔案，因此，使用外部樣式方式設定的樣式可以整個網站。 

　　1、通過屬性為元素設定 class 樣式

在以前的前端開發中，我們可以直接在 class 屬性中寫上需要設定的元素樣式，瀏覽器就會自動幫我們渲染完成，例如我們經常使用到的 Boostrap 這一類的 UI 框架，當我們在頁面中引入了樣式檔案，再去使用其中的樣式，只需要在 class 屬性中指明樣式名稱即可。例如下面的程式碼中我們建立了一個固定寬度並支援響應式佈局的 div。

<div class="container"></div>

　　而當我們想以同樣的方法為元素的 class 屬性設定樣式時，我們可以發現我們期望的結果並沒有出現。開啟控制檯，我們可以看到 vue 給我們提供了一個報錯資訊：當前例項上找不到名為 textRed 的屬性或是方法。通過在之前學習 v-bind 指令的時候瞭解到，這裡繫結的其實是一個 js 變數，所以在這裡我們對於樣式的繫結並不會生效。

<style>
    .textRed {
        color: red
    }
</style>

<
 
h2 :class="textRed"></h2>

　　a）陣列語法

　　在vue 中作者給我們提供了使用陣列進行繫結樣式的方式，這裡我們可以直接在陣列中寫上樣式的類名即可。注意：這裡如果不使用單引號包裹類名，其實代表的還是一個變數的名稱，因此，還是會出現錯誤資訊。

<style>
    .textRed {
        color: red
    }
    .textThin {
        font-weight: 200
    }
</style>

<div id="app">
    <h2 :class="['textRed','textThin']">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>
</div>

　　當然，如果你就是想以變數的方式，就需要你先定義好這個變數。

<style>
    .textRed {
        color: red
    }
    .textThin {
        font-weight: 200
    }
</style>

<div id="app">
    <h2 :class="[textRed,textThin]">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            textRed: 'active',
            textThin: 'text-danger'
        },
        methods: {}
    })
</script>

　　當我們需要設定多個樣式時，只需要在這個陣列中增加樣式類名即可，我們通過檢視元素可以發現，這裡已經自動渲染成了瀏覽器可以識別的寫法。可能你會發現，這樣寫好像沒有什麼好處啊，反而比之前更麻煩了。不過，在這裡我們可以使用三元表示式根據條件切換列表中的 class ，嗯，這種寫法原來的寫法是不可以的。

<style>
    .textRed {
        color: red
    }
    .textThin {
        font-weight: 200
    }
    .textAquamarine {
        color: aquamarine
    }
</style>

<div id="app">
    <h2 :class="[flag?'textAquamarine':'textRed','textThin']">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {}
    })
</script>

　　在這裡，我們就可以根據 flag 的值去載入不同的樣式。不過當有多個條件 class 時這樣寫有些繁瑣。所以在陣列語法中也可以使用物件語法：

<h2 :class="[{'textAquamarine':flag,'textRed':!flag},'textThin']">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

　　b）物件語法

　　在上面的例子的最後，我們在陣列中使用了物件的形式來設定樣式，而在 vue 中，我們也可以直接使用物件的形式來設定樣式。此時，物件的屬性為樣式的類名，value 則為 true or false，當值為 true 時則顯示樣式。這裡，由於物件的屬性可以帶引號，也可不帶引號，所以屬性就按照你自己的習慣寫法就可以了。

<h2 :class="{textAquamarine:flag,textThin:flag}">我是標題標題標題標題標題標題啊啊啊啊~~~</h2> 

　　當物件中的屬性過多時，如果我們還是採用直接全部寫到元素上時，勢必會顯得比較繁瑣，這時，我們同樣可以在元素上只寫上物件變數就可以了，當然，別忘了在 vue  例項中定義。

<h2 :class="styleObject">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject: {
                textAquamarine: true,
                textThin: true
            }
        },
        methods: {}
    })
</script>

　　2、通過屬性為元素設定 style 樣式

a）物件語法

　　與使用屬性為元素設定 class 樣式相同，在 vue 中，我們也可以使用物件的方式，為元素設定 style 樣式。

　　v-bind:style 的繫結物件的語法雖然像 CSS，但其實實質上還是一個 JavaScript 物件。CSS 屬性名可以用駝峰命名法 (camelCase) 或短橫線分隔 (kebab-case，需使用單引號括起來) 來命名。

<h2 :style="{color:'aquamarine','font-weight': '200'}">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

　　同樣的，可以直接繫結一個樣式物件變數，這樣的話程式碼看起來也會更簡潔美觀。

<h2 :style="styleObject">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject: {
                color: 'aquamarine',
                'font-weight':200
            }
        },
        methods: {}
    })
</script>

　　b）陣列語法

　　當我們使用陣列的方式為 style 屬性設定樣式的時候，陣列中每一項都是 vue 例項中 data 中的樣式物件，即我們可以設定多個樣式物件，通過陣列的方式，全部應用到元素上。

<h2 :style="[baseStyle,additionStyle]">我是標題標題標題標題標題標題啊啊啊啊~~~</h2>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            baseStyle: {
                    color: 'aquamarine'
            },
            additionStyle: {
                'font-weight': '200'
            }
        },
        methods: {}
    })
</script>

 三、總結

　　a）在 vue 中可以使用陣列語法、物件語法對繫結的 class、style 屬性的元素設定樣式。

　　對於陣列語法來說，繫結 class 屬性的元素在設定樣式時在陣列中放置的元素為各個樣式類的類名（直接放置類名需要加上單引號）；而繫結 style 屬性的元素在設定樣式時再陣列中放置的則是一個個包含樣式的物件。

　　對於物件語法來說，繫結 class 屬性的元素在設定樣式時物件的每一個屬性為樣式類名，對應的屬性值則是布林值，我們則可以通過更改屬性值的 true or false 來設定樣式的是否啟用；而對於繫結 style 屬性的元素在設定樣式時，物件中的屬性則是一個個的 css 內建屬性，而對應的屬性值則是這個 css 屬性的自定義值。

　　b）當 v-bind:style 使用需要新增瀏覽器引擎字首的 CSS 屬性時，如 transform，Vue.js 會自動偵測並新增相應的字首。