Vue的class綁定是Vue的一個(gè)特性，它可以讓開發(fā)者輕松地為Vue組件中的元素添加class樣式。Vue的class綁定有多種方式，包括對(duì)象語法、數(shù)組語法和字符串語法。

對(duì)象語法：

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

在上面的例子中，我們可以看到:class后面是一個(gè)對(duì)象{}，這個(gè)對(duì)象中的key是class名稱，而value則是一個(gè)布爾值，表示該class是否生效。這種語法方式非常靈活，我們可以根據(jù)不同的數(shù)據(jù)來決定是否添加class。

數(shù)組語法：

<template>
<div :class="[classA, classB]">
This div will have both classA and classB.
</div>
</template>
<script>
export default {
data() {
return {
classA: 'red',
classB: 'bold'
}
}
}
</script>

在上面的例子中，我們可以看到:class后面是一個(gè)數(shù)組[]，在這個(gè)數(shù)組中列出的class名稱都會(huì)被應(yīng)用到元素上。

字符串語法：

<template>
<div :class="classC">
This div will have classC.
</div>
</template>
<script>
export default {
data() {
return {
classC: 'red bold'
}
}
}
</script>

在上面的例子中，我們可以看到:class后面是一個(gè)字符串，這個(gè)字符串中列出的class名稱都會(huì)被應(yīng)用到元素上。這種方式非常方便，但是不夠靈活。