在這個看顏值的時代，美，真的太重要了。為了方便CSS美好HTML的美，Vue3.0特意提供了操作元素的class和內聯樣式的指令。因為它們都是元素，所以我們可以用v-bind進行處理。
由於字串拼接麻煩且易錯，所有Vue3.0在v-bind用於class和 style時，做了專門的增強，表示式結果的型別除了字串之外，還可以是物件或陣列。
6.1 Class指令Vue用v-bind:class(簡寫為:class)指令，用於解決動態切換class的需求。如果你不清楚用在什麼哪方面的需求，就想一下提示資訊的應用，在錯誤發生時，用紅色字型，否則用綠色。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0 class指令</title> <script src="vue.global.js"></script> <style> .b { font-weight: bold; } .error { color: red; } </style></head><body><span id="app"><h1 class="b" :class="{ 'error': hasError }">老陳帥不？ 如果你說不帥，我就用紅色字型，亮瞎你的眼。</h1></span><script> Vue.createApp({ data() { return { hasError: true } } }).mount("#app")</script></body></html>渲染結果(生成的程式碼)
<h1 class="b error">老陳帥不？ 如果你說不帥，我就用紅色字型，亮瞎你的眼。</h1>輸出結果
如果你想同時滿足多個class，你可以用class的陣列語法。這個語法，可讀性更強一些。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0 class指令</title> <script src="vue.global.js"></script> <style> .b { font-weight: bold; } .big-text { font-size: 60px; } .error { color: red; } </style></head><body><span id="app"><p class="b" :class="[fontSize, errorInfo]"> 程式設計師<br/> 除了會程式設計之外，還會什麼？<br/> 當然是敲程式碼了。</p></span><script> Vue.createApp({ data() { return { fontSize: 'big-text', errorInfo: 'error' } } }).mount("#app")</script></body></html>渲染結果(生成的程式碼)
<span id="app"><p class="b big-text error"> 程式設計師<br> 除了會程式設計之外，還會什麼？<br> 當然是敲程式碼了。 </p></span>輸出結果
如果你糾結該用紅色字體表明不帥，還是用藍色字體表明帥的話，那你可以用三元表示式，根據條件切換列表中的class。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0 class指令</title> <script src="vue.global.js"></script> <style> .b { font-weight: bold; font-size: 50px; } .yes { color: #008CBA; } .no { color: red; } </style></head><body><span id="app"><p class="b" :class="[isCool ? 'yes' :'no']"> 老陳帥不？帥的，藍色字型代表我的心。</p></span><script> Vue.createApp({ data() { return { isCool: true } } }).mount("#app")</script></body></html>輸出結果
6.2 內聯樣式在HTML中，在元素上用style的話，結果是不可改變的，為此Vue3.0加上了:style指令。注意，你別看這個指令看起來十分直觀，看著非常像CSS，但其實是一個 JavaScript 物件來的。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0 style指令</title> <script src="vue.global.js"></script></head><body><span id="app"><p :style="{ color: textColor, fontSize: fontSize + 'px' }"> 程式設計師，除了你之外，都是美的，哈哈~</p></span><script> Vue.createApp({ data() { return { textColor: '#008CBA', fontSize: 50 } } }).mount("#app")</script></body></html>輸出結果
如果你覺得這種方式不好，傷了你的心，那你可以用樣式物件的方式。這樣的寫法，是不是更舒服了一些，輸出結果和上面是一模一樣的。
<span id="app"><p :style="styleOj"> 程式設計師，除了你之外，都是美的，哈哈~</p></span><script> Vue.createApp({ data() { return { styleOj: { color: '#008CBA', fontSize: '50px' } } } }).mount("#app")</script>既然class可以用陣列語法，:style當然也可以。:style的陣列語法可以將多個樣式物件應用到同一個元素上。輸出結果和上面的還是一樣的，我就不重複貼上了。
<span id="app"><p :style="[textColor, fontSize]"> 程式設計師，除了你之外，都是美的，哈哈~</p></span><script> Vue.createApp({ data() { return { textColor: { color: '#008CBA', }, fontSize: { 'font-size': '50px' } } } }).mount("#app")</script>好了，有關Vue3.0樣式繫結的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
#前端##Vue.js##程式設計師##Web##JavaScript#