Vue中的class屬性可以使用一個數組形式，最終渲染時這個數組會被展開成一個用空格隔開的類名字符串。這種方式允許我們根據多個條件動態地綁定類名，具有更大的靈活性和可維護性。下面是一個示例。

<template>
<div
class="container"
:class="[sizeClass, { 'is-active': isActive }, themeClass]"
>
This is a container.
</div>
</template>
<script>
export default {
data() {
return {
sizeClass: 'size-' + this.size,
isActive: true,
themeClass: 'theme-' + this.theme
}
},
props: {
size: { type: String, default: 'md' },
theme: { type: String, default: 'light' }
}
}
</script>

上述代碼中，我們定義了一個元素的class屬性，其中包括了三個類名：按照組件的size值動態綁定的sizeClass、固定的is-active類、以及按照組件的theme值動態綁定的themeClass。假設組件實例的size為'sm'，theme為'dark'，那么這個元素最終渲染時的class屬性為"container size-sm is-active theme-dark"。

需要注意的是，class數組中的元素可以是對象，對象的key是類名，value是一個布爾值，表示是否需要生效該類名。如果value是變量，則表示該變量的值檢測為truthy時生效該類名。例如上述代碼中的isActive變量值為true，所以元素最終渲染時包含is-active類名。如果該變量值為false，則不包含is-active類名。