Vue是目前非常流行的前端框架之一，它的核心是響應式數據綁定和組件化開發。Vue的組件可以使用template編寫，也可以使用單文件組件（SFC）的方式編寫，其中的class函數是單文件組件中一個非常重要的部分。

<template>
<div class="example" :class="classObject">
Example
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.hasError,
error: this.hasError && !this.isActive
}
}
}
}
</script>

可以看到，我們定義了一個叫做classObject的計算屬性，它返回一個對象，這個對象中的鍵是一些自定義的類名，值是一個布爾值，表示該類名是否需要添加到該元素的class屬性中。根據組件的data數據（isActive和hasError），classObject屬性計算出來的結果決定了這個組件最終渲染出來的class屬性的值。

我們可以在組件上綁定這個classObject屬性，使用v-bind:class指令：

<div class="example" :class="classObject">
Example
</div>

通過這樣的方式，我們可以非常方便地根據組件內的狀態動態控制組件最終渲染出來的class屬性。class函數是Vue單文件組件中一個重要的應用場景，對于組件化開發和樣式管理非常有幫助。