vue的动态class函数

Vue中的动态class函数是通过使用:class指令来实现的。它允许你根据不同的条件来动态地添加或移除元素的class。这种函数有三种常见的用法：根据条件动态添加class、根据数组动态添加class和根据对象动态添加多个class。

1. 根据条件动态添加class: 可以使用三元表达式或者对象字面量来实现。例如，如果isActive为true，则添加类名'active'，否则不添加。示例代码如下：

<template>
  <div :class="{'active': isActive}"></div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

2. 根据数组动态添加class: 可以使用一个数组来动态添加多个类名。数组中的元素可以是字符串，也可以是在data中定义的变量。例如，如果btnType的值为'primary'，则添加类名'btn primary'。示例代码如下：

<template>
  <div :class="['btn', btnType"></div>
</template>
<script>
export default {
  data() {
    return {
      btnType: 'primary'
    }
  }
}
</script>

3. 根据对象动态添加多个class: 可以使用一个对象来动态添加多个类名。对象的属性名代表类名，属性值为布尔值，表示是否添加该类名。例如，如果classObject中的'btn'为true，'btn-primary'为true，'disabled'为false，则添加类名'btn btn-primary'，不添加类名'disabled'。示例代码如下：

<template>
  <div :class="classObject"></div>
</template>
<script>
export default {
  data() {
    return {
      classObject: {
        'btn': true,
        'btn-primary': true,
        'disabled': false
      }
    }
  }
}
</script>

以上就是Vue中动态class函数的用法。通过使用:class指令以及不同的语法，我们可以根据不同的条件来动态地添加或移除元素的class，从而实现样式的动态变化。