Vue Class與Style綁定

操做元素的class列表和內聯樣式是數據綁定的一個常見需求。由於它們都是屬性，因此咱們能夠用 v-bind 處理它們：只須要經過表達式計算出字符串結果便可。

表達式結果的類型除了字符串以外，還能夠是對象或數組。

綁定HTML的class

對象語法

咱們能夠傳給 v-bind:class 一個對象，以動態地切換 class

上圖的語法表示 Font 這個 class 存在與否將取決於數據屬性 isFont 的值。

固然也能夠傳入更多屬性來動態切換多個class

此外，v-bind:class 指令也能夠與普通的 class 屬性共存。

固然綁定的數據也沒必要定義在模板裏，這樣也是能夠的，渲染的結果和上面同樣

數組語法

咱們能夠把一個數組傳給 v-bind:class，以應用一個 class 列表：

固然若是想根據條件切換列表中的 class，能夠用三元表達式：

也能夠這樣<div class="background" v-bind:class="[isActive?Font:"",col]">測試文字1</div>

這樣寫將始終添加 col，可是隻有在 isActive 是 truthy 時才添加 Font。

不過，當有多個條件 class 時這樣寫有些繁瑣。因此在數組語法中也可使用對象語法：

<div class="background" v-bind:class="[{Font:isActive},col]">測試文字1</div>
複製代碼

綁定內聯樣式

對象語法

v-bind:style 的對象語法十分直觀——看着很是像 CSS，但實際上是一個 JavaScript 對象。

直接綁定到一個樣式對象一般更好，這會讓模板更清晰：

數組語法

v-bind:style 的數組語法也能夠將多個樣式對象應用到同一個元素上：

自動添加前綴

當 v-bind:style`` 使用須要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，則 Vue.js 會自動偵測並添加相應的前綴。

多重性

你能夠爲 style 綁定中的屬性提供一個包含多個值的數組，經常使用於提供多個帶前綴的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
複製代碼

---

P_P