Vue.js是一個非常流行的JavaScript框架，它使得構建現代Web應用程序更加容易。Vue.js提供了一些很好的高級功能，使得我們可以更加輕松地構建復雜的Web應用程序。其中一個重要功能就是Vue class on指令，它允許我們動態地添加或移除CSS類，從而控制DOM元素的樣式。

// 使用Vue class on指令
<div v-bind:class="{ 'active': isActive }"></div>
// 在JavaScript中控制isActive變量
data: {
isActive: true
}

在上面的代碼示例中，我們可以看到如何使用Vue class on指令來控制DOM元素的樣式。 isActive是一個變量，我們可以在JavaScript中動態地更改它的值，以便添加或移除CSS類。如果isActive為true，'active'這個CSS類將會添加到該div元素上；相反，如果isActive為false，'active'這個CSS類將會從該div元素上移除。

除此之外，我們還可以在Vue class on指令中使用數組。如果我們想要同時添加多個CSS類，則可以使用一個包含這些類名的數組。在下面的代碼示例中，我們定義了一個名為classObject的對象，其中包含三個CSS類名。我們將這個對象傳遞給Vue的v-bind:class指令，從而控制DOM元素的樣式。

// 使用數組來添加多個CSS類
<div v-bind:class="[classObject]"></div>
// 定義多個CSS類的對象
data: {
classObject: {
'active': true,
'text-danger': false,
'text-success': true
}
}

通過使用Vue class on指令，我們可以輕松地實現動態控制DOM元素的樣式。它使我們的代碼更加清晰、易于維護，并且能夠幫助我們在構建現代Web應用時更加高效地工作。