2.6　class與style樣式綁定

在Vue中，經常需要動態地設置元素的CSS樣式，我們可以通過v-bind屬性綁定，為標簽的class屬性和style屬性動態賦值。

2.6.1　HTML樣式綁定

1．數組語法

在Vue中，動態的樣式類在v-bind：class中定義，靜態的類名寫在class樣式中。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.51所示。

在上面的示例代碼中，數組中樣式的類名要使用單引號包裹，不然會出錯。但是在某些應用場景下，需要使用變量表示類名，在數組中也可以使用這種方式綁定樣式。

index.html文件代碼如下：

在數組中也可以直接使用對象語法，示例代碼如下：

上面代碼運行的效果和圖2.51所示的效果是相同的。

2．對象語法

在Vue中可以直接使用對象設置樣式，對象的屬性為樣式的類名，其值為Boolean類型，當值為true時顯示樣式。對象的屬性可以帶引號，也可以不帶引號。

index.html文件代碼如下：

上面代碼運行的效果和圖2.51所示的效果相同。當對象中的屬性過多時，如果將所有屬性都寫在元素上，則標簽會顯得代碼冗余，此時我們可以使用計算屬性來解決這個問題。

index.html文件代碼如下：

上面代碼運行的效果和圖2.51所示的效果是相同的。

2.6.2　內聯樣式綁定

內聯樣式是將CSS樣式編寫到元素的style屬性中，這種操作方法與設置class樣式相同，也可以使用對象為元素進行設置。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.52所示。

同樣，可以直接綁定一個樣式對象屬性，這樣的代碼看起來會更加簡潔美觀。

index.html文件代碼如下：

還可以使用計算屬性，返回樣式對象，代碼如下：

上面示例代碼運行的效果和圖2.52所示的效果相同。