Class 可以通過對象語法和數組語法進行動態綁定：
- 對象語法：
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> data: { isActive: true, hasError: false }
- 數組語法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' }
Style 也可以通過對象語法和數組語法進行動態綁定：
- 對象語法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 }
- 數組語法：
<div v-bind:style="[styleColor, styleSize]"></div> data: { styleColor: { color: 'red' }, styleSize:{ fontSize:'23px' } }
- 定義變量法：
通過判斷一個條件去改變樣式在項目中會經常遇到，此時我們可以適應給想要綁定的class定義一個變量進行動態切換class。
<div class=“className” :class={newclass : variable }>
我們可以將這個variable 在我們的data里面設置成false（默認不顯示）
data () {
variable :false
}
之后給newclass 編寫我們想要動態變動的樣式
.className{
color: red;
}
.newclass {
color: black
}
現在是因為newclass 是定義的變量為Flase所以樣式為className定義的內容
在我們js內容部分：
if（條件）{
this.variable =true
}
即可通過條件來動態的切換樣式。