class與style綁定 · vue2中文文檔

# Class 與 Style 綁定數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性，我們可以用`v-bind`?處理它們：只需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在?`v-bind`?用于?`class`?和?`style`?時， Vue.js 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。 [](https://vuefe.cn/guide/class-and-style.html#綁定-HTML-Class) ## [](https://vuefe.cn/guide/class-and-style.html#綁定-HTML-Class)[](https://vuefe.cn/guide/class-and-style.html#綁定-HTML-Class "綁定 HTML Class")綁定 HTML Class [](https://vuefe.cn/guide/class-and-style.html#對象語法) ### [](https://vuefe.cn/guide/class-and-style.html#對象語法)[](https://vuefe.cn/guide/class-and-style.html#對象語法 "對象語法")對象語法我們可以傳給?`v-bind:class`?一個對象，以動態地切換 class 。 ~~~ <div v-bind:class="{ active: isActive }"></div> ~~~ 上面的語法表示 class`active`?的更新將取決于數據屬性?`isActive`?是否為[真值](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)?。我們也可以在對象中傳入更多屬性用來動態切換多個 class 。此外，?`v-bind:class`?指令可以與普通的 class 屬性共存。如下模板: ~~~ <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> ~~~ 如下 data: ~~~ data: { isActive: true, hasError: false} ~~~ 渲染為: ~~~ <div class="static active"></div> ~~~ 當?`isActive`?或者?`hasError`?變化時，class 列表將相應地更新。例如，如果?`hasError`?的值為?`true`?， class列表將變為?`"static active text-danger"`。你也可以直接綁定數據里的一個對象： ~~~ <div v-bind:class="classObject"></div> ~~~ ~~~ data: { classObject: { active: true, 'text-danger': false }} ~~~ 渲染的結果和上面一樣。我們也可以在這里綁定返回對象的[計算屬性](https://vuefe.cn/guide/computed.html)。這是一個常用且強大的模式： ~~~ <div v-bind:class="classObject"></div> ~~~ ~~~ data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } }} ~~~ [](https://vuefe.cn/guide/class-and-style.html#數組語法) ### [](https://vuefe.cn/guide/class-and-style.html#數組語法)[](https://vuefe.cn/guide/class-and-style.html#數組語法 "數組語法")數組語法我們可以把一個數組傳給?`v-bind:class`?，以應用一個 class 列表： ~~~ <div v-bind:class="[activeClass, errorClass]"> ~~~ ~~~ data: { activeClass: 'active', errorClass: 'text-danger'} ~~~ 渲染為: ~~~ <div class="active text-danger"></div> ~~~ 如果你也想根據條件切換列表中的 class ，可以用三元表達式： ~~~ <div v-bind:class="[isActive ? activeClass : '', errorClass]"> ~~~ 此例始終添加?`errorClass`?，但是只有在?`isActive`?是 true 時添加?`activeClass`?。不過，當有多個條件 class 時這樣寫有些繁瑣。可以在數組語法中使用對象語法： ~~~ <div v-bind:class="[{ active: isActive }, errorClass]"> ~~~ [](https://vuefe.cn/guide/class-and-style.html#綁定內聯樣式) ## [](https://vuefe.cn/guide/class-and-style.html#綁定內聯樣式)[](https://vuefe.cn/guide/class-and-style.html#綁定內聯樣式 "綁定內聯樣式")綁定內聯樣式 [](https://vuefe.cn/guide/class-and-style.html#對象語法-1) ### [](https://vuefe.cn/guide/class-and-style.html#對象語法-1)[](https://vuefe.cn/guide/class-and-style.html#對象語法-1 "對象語法")對象語法 `v-bind:style`?的對象語法十分直觀——看著非常像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）： ~~~ <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ~~~ ~~~ data: { activeColor: 'red', fontSize: 30} ~~~ 直接綁定到一個樣式對象通常更好，讓模板更清晰： ~~~ <div v-bind:style="styleObject"></div> ~~~ ~~~ data: { styleObject: { color: 'red', fontSize: '13px' }} ~~~ 同樣的，對象語法常常結合返回對象的計算屬性使用。 [](https://vuefe.cn/guide/class-and-style.html#數組語法-1) ### [](https://vuefe.cn/guide/class-and-style.html#數組語法-1)[](https://vuefe.cn/guide/class-and-style.html#數組語法-1 "數組語法")數組語法 `v-bind:style`?的數組語法可以將多個樣式對象應用到一個元素上： ~~~ <div v-bind:style="[baseStyles, overridingStyles]"> ~~~ [](https://vuefe.cn/guide/class-and-style.html#自動添加前綴) ### [](https://vuefe.cn/guide/class-and-style.html#自動添加前綴)[](https://vuefe.cn/guide/class-and-style.html#自動添加前綴 "自動添加前綴")自動添加前綴當?`v-bind:style`?使用需要特定前綴的 CSS 屬性時，如?`transform`?，Vue.js 會自動偵測并添加相應的前綴。