在 Vue 中，不僅可以使用常規的 HTML 標簽，還可以使用自定義的組件。而組件的樣式通常可以通過 class 來控制。Vue 中的 class 也有一些特殊的用法。

<template>
<div :class="{ red: isRed }">
This text will be red if isRed is true.
</div>
</template>
<script>
export default {
data() {
return {
isRed: true
};
}
};
</script>
<style>
.red {
color: red;
}
</style>

在上面的示例中，我們使用了一個對象來定義 class。這個對象的 key 就是 class 的名字，value 則是一個判斷值（比如 true 或 false）。如果這個判斷值為真，那么對應的 class 就會被添加到對應的 HTML 標簽上。

此外，也可以在 class 中使用計算屬性。

<template>
<div :class="classes">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
isError: true,
isWarning: true,
message: 'Hello, world!'
};
},
computed: {
classes() {
return {
error: this.isError,
warning: this.isWarning
};
}
}
};
</script>
<style>
.error {
color: red;
}
.warning {
color: yellow;
}
</style>

在這個示例中，我們使用了一個計算屬性來定義 class。這個計算屬性返回一個對象，對象的 key 是 class 的名字，value 則是一個 bool 值。如果這個 bool 值為真，那么對應的 class 就會被添加到對應的 HTML 標簽上。