學習要點：
1.Class 綁定
2.Style 綁定
本節課我們來開始學習 Vue3.x 的 class 和 style 綁定的方法。
一．Class 綁定
1. 先復習一下前面課程中 v-bind:的用法：v-bind:class 或:class 簡寫即可；
<style>
.red {
color: red;
}
style>
<span v-bind:class="className">Class 綁定效果span>
data() {
return {
className : 'red'
}
},
PS：再重復一次，className 如果作為 v-bind:class 參數的值，是不需要加雙括號的；
2. 如果想通過一個布爾值來實現，是否要加載這個樣式，那么可以改寫成如下：
// 在 data() 創建一個布爾屬性
isRed : false
// 當 isRed 為 false：class=''，當為 true 時：class='red'，解構語法用{}包含
// {class 名稱 ： 布爾屬性}
<span v-bind:class="{red : isRed}">Css 綁定效果span>
PS：這里屬性 className 就沒有被使用，并且支持多個 class 疊加，-號需單引號防解析錯誤；
v-bind:class="{red : isRed, 'big-font' : isBigFont}"
3. 判斷 class 樣式的布爾屬性太多，且指令的參數值太復雜導致壓力大，可簡寫：
<span v-bind:class="classObject">Css 綁定效果span>
data() {
return {
counter : 100,
classObject : {
red : true,
'big-font' : true
}
}
},
PS：使用計算屬性來實現如上的功能：
// 計算屬性
computed : {
classObject() {
return {
red : true,
'big-font' : true
}
}
}
4. 還有一種列表式數組方式：即你添加就有效果，不添加就沒有效果，如下：
<span v-bind:class="[redClass, bigFontClass]">Css 綁定效果span>
data() {
return {
redClass : 'red',
bigFontClass : 'big-font',
}
},
PS：列表式數組也支持類似布爾是否顯示，通過數組的三元來實現；
<span v-bind:class="[isRed ? redClass : '', bigFontClass]">Css 綁定效果span>
PS：三種方式第一次用建議選選其中一種，否則會比較混亂；學習后期，可根據場景查詢使用；
二．Style 綁定
1. 有了 Class 綁定基礎，Style 行內綁定就簡單多了，方式也是類似：
// 解構綁定
<span v-bind:style="{color : styleColor}">Style 綁定效果span>
// 綁定屬性對象或計算屬性綁定
<span v-bind:style="StyleObject">Style 綁定效果span>
// 列表式數組綁定
<span v-bind:style="[redStyle]">Style 綁定效果span>
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
