18 類綁定 · JavaBeginnersTutorial 中文系列教程

# 18 類綁定 > 原文： [https://javabeginnerstutorial.com/vue-js/18-class-bindings/](https://javabeginnerstutorial.com/vue-js/18-class-bindings/) 歡迎再次參加具有約束力的討論。今天，我將為您學習**類綁定**。換句話說，我們將通過使用 Vue 將數據綁定到 HTML 元素的`class`屬性來對其進行處理。為什么？因為可能需要我們經常操作元素的類列表。就像任何其他數據綁定一樣，我們在此處也執行相同的歌曲和舞蹈，即強大的“`v-bind`”或其快捷方式“`:`”可用于處理這種情況。表達式可以計算為**字符串，對象或數組**。聽起來令人困惑？別擔心！在一些示例的支持下，讓我們一次邁出一步。您會立即看到自己沖刺！ ## 初始代碼： index.html ```js <!DOCTYPE html> <html> <head> <title>Hello Vue!</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <div>  </div> </div>  <script src="index.js"></script> <link rel="stylesheet" href="style.css"></link> </body> </html> ``` index.js ```js new Vue({ el: "#app", data: {} }); ``` style.css ```js  ``` ## 對象語法假設我們有一個名為“`success`”的類，其樣式在`style.css`樣式表中定義如下， ```js .success { color: green; font-weight: bold; font-size: 70px; } ``` 使用 Vue，通過將其作為對象傳遞給`v-bind:class`來動態切換此類非常容易。 `index.html`（代碼段） ```js <div id="app"> <h2>Welcome</h2> <div>  <div :class="{ success : successFlag }"> Hello!! </div> <p>The value of successFlag is {{ successFlag }}</p> </div> </div> ``` 快捷方式`:`用于此處的指令`v-bind`。 `index.js` ```js new Vue({ el: "#app", data: { successFlag : true } }); ``` 非常簡單！我們有一個`div`標簽，顯示為“`Hello !!`”。由于`data`屬性的`successFlag`值為`true`，因此`div`標簽中包含類`success`，并且其樣式將應用于標簽中的文本。 ![class binding with objects](https://img.kancloud.cn/bb/79/bb7934d2c415db1d1a252c083585142d_440x390.png) 在瀏覽器中可以清楚地看到結果。 Chrome DevTools 窗格顯示 HTML 代碼中如何顯示“`success`”類。如果我們將`successFlag`的值設置為`false`，那么這就是輸出的樣子。 `index.js`（代碼段） ```jsscript data: { successFlag : false } ``` ![Toggle class](https://img.kancloud.cn/dc/f8/dcf8d511c45a708365967a501812e764_440x327.png) 奇跡般有效！如果我們擁有普通的`class`屬性，并且在此屬性之上，我們想借助`v-bind:class`來切換另一個類的存在？換句話說，我們可以在一個元素上同時具有`class`和`v-bind:class`嗎？可能嗎？ YESSSS！使用 Vue，幾乎所有內容都是肯定的！最好的部分是，我們可以通過**兩種**方式實現這一目標。 ### 方法 1：內聯對象 `index.html`（代碼段） ```html <div>  <div class="underline" :class="{ success : successFlag, bcg : bcgFlag }"> Hello!! </div> <p>The value of successFlag is {{ successFlag }}</p> </div > ``` `index.js`（代碼段） ```jsscript data: { successFlag: false, bcgFlag: true } ``` `style.css`（代碼段） ```css .underline { text-decoration-color: red; text-decoration-line: underline; } .bcg { background-color: aqua; padding: 5px; width: fit-content; } ``` 普通的`class`屬性具有將始終呈現的類`underline`。還可能在對象中將更多字段傳遞給`v-bind:class`。為了理解這一點，讓我們根據其值的真實性切換兩個類。在上面的代碼中，兩個類`success`和`bcg`作為對象傳遞給`v-bind:class`。 `successFlag`和`bcgFlag`分別設置為`false`和`true`。因此，呈現的類列表將變為“`underline bcg`”，并且僅應用那些樣式。 ### 方法 2：綁定非內聯對象 `index.html`（代碼段） ```html <div class="underline" :class="classObject"> Hello!! </div> ``` `index.js`（代碼段） ```jsscript data: { classObject: { success : false, bcg : true } } ``` 在 vue 實例的數據中指定了要綁定到`v-bind:class`的對象。 ![binding multiple objects](https://img.kancloud.cn/b1/c5/b1c51c95019920a878102d7c4a7059c7_499x341.png) ## 數組語法可以使用類以數組的形式將類傳遞給`v-bind:class`，而不是使用對象， `index.html`（代碼段） ```html  <div class="underline" :class="[successClass, bcgClass]"> Array Bindings. </div> ``` `index.js`（代碼段） ```jsscript data: { successFlag: false, bcgFlag: true, successClass: 'success', bcgClass: 'bcg' } ``` 為簡單起見，本示例也使用相同的類。在 chrome DevTools 中檢查時，這將呈現所有三個類， `<div class="underline success bcg">` ![Class binding with arrays](https://img.kancloud.cn/f2/0c/f20c17efc8c8f77ba81ed03a33d03c39_523x464.png) 上面討論的所有代碼都可以在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中找到。啟動您喜歡的 IDE，并編寫一些自己的方案！如有任何疑問，請隨時在“評論”部分中進行提問。請繼續關注，因為我們的下一篇文章都是關于綁定內聯樣式的。