vue动态设置class

在Vue中动态设置class有多种方式。以下是一些常用的方法：

1. 使用对象语法：您可以根据条件动态添加或删除class。在模板中，您可以使用v-bind来绑定一个对象，该对象的键是class名，值是一个布尔值，用于指示是否应该应用该class。例如：

<div v-bind:class="{ 'active': isActive, 'error': hasError }"></div>

在上面的例子中，如果isActive为true，则会添加active class；如果hasError为true，则会添加error class。

2. 使用数组语法：您可以将一个包含class名的数组绑定到v-bind:class，这样可以根据多个条件动态设置class。例如：

<div v-bind:class="[isActive ? 'active' : '', hasError ? 'error' : '']"></div>

在上面的例子中，如果isActive为true，则添加active class；如果hasError为true，则添加error class。

3. 使用计算属性：您可以创建一个计算属性来返回一个对象或数组，并将其绑定到v-bind:class。计算属性可以根据不同的条件返回不同的class名。例如：

<div v-bind:class="classObject"></div>

data() {
  return {
    isActive: true,
    hasError: false
  }
},
computed: {
  classObject() {
    return {
      'active': this.isActive,
      'error': this.hasError
    }
  }
}

在上面的例子中，如果isActive为true，则添加active class；如果hasError为true，则添加error class。

这些是Vue中动态设置class的几种常用方法，您可以根据自己的需求选择适合的方法。