Vue中class的作用

在 Vue 中，class 的作用主要有两个：

绑定样式类

通过绑定 class，可以在模板中动态地添加或移除指定的样式类。例如，可以根据组件的状态来添加不同的样式类，从而改变组件的外观。具体的绑定方式有以下几种：

对象语法：可以传入一个对象，对象的键是样式类名称，值是一个布尔值或一个返回布尔值的函数。只有在值为真的时候才会添加对应的样式类。例如：

<template>
  <div :class="{ 'is-active': isActive }">...</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

数组语法：可以传入一个数组，数组的元素可以是字符串、对象或数组。如果数组元素是字符串，则会直接添加该样式类。如果数组元素是对象，则会根据对象的键值来判断是否添加对应的样式类。如果数组元素是数组，则会递归解析该数组，直到得到字符串或对象为止。例如：

<template>
  <div :class="[ 'base-class', { 'is-active': isActive } ]">...</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

字符串语法：可以直接传入一个字符串，字符串中可以包含多个样式类，用空格分隔。例如：

<template>
  <div class="base-class is-active">...</div>
</template>

绑定组件样式

通过绑定 class，可以在组件中访问到外部样式表或者内联样式。例如，可以将组件的样式定义在外部样式表中，然后在组件中绑定对应的样式类，从而实现样式复用。具体的绑定方式有以下几种：

绑定外部样式表：可以在组件中使用 class 属性绑定外部样式表中的样式类。例如：

<template>
  <div class="base-class external-class">...</div>
</template>

绑定内联样式：可以在组件中使用 class 属性绑定内联样式。例如：

<template>
  <div :class="customStyle">...</div>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {
        color: 'red',
        fontSize: '16px'
      }
    }
  }
}
</script>
``