最近我在開發 Vue 的時候遇到了一個問題，就是 Vue 的 class 綁定失效了。

我在組件中這樣寫：

<template>
<div :class="{'active': isActive}">
This is a div
</div>
</template>
<script>
export default {
data() {
return {
isActive: false
}
}
created() {
this.isActive = true;
}
}
</script>

預期效果是在組件創建后，div 會擁有'active'這個 class，從而變成激活狀態。但實際上，什么也沒有發生。我在控制臺里面打印了 isActive 的值，發現它確實是 true，但是 div 并沒有相應的 class。

我查找了很多資料，最終找到了問題所在。原來 Vue 組件中的 :class 綁定只會在數據發生變化時才會重新計算 class，而在 created 鉤子函數中改變數據并不會觸發 :class 的重新計算。因此，只需將 isActive 的初始值設為 true，就可以達到想要的效果：

<template>
<div :class="{'active': isActive}">
This is a div
</div>
</template>
<script>
export default {
data() {
return {
isActive: true
}
}
}
</script>

總之，如果出現了 Vue 的 class 綁定失效的問題，不妨檢查一下數據是否發生了變化，或者是不是影響了 :class 的自動計算。