前端Vue日常工作中--动态css类

在Vue中，你可以使用绑定的class来动态地切换CSS类。这可以通过表达式，对象，或数组的方式来实现。

1. 表达式：

<div :class="{ active: isActive, 'text-success': hasSuccess }"></div>

data() {
  return {
    isActive: true,
    hasSuccess: false
  }
}

2. 对象：

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

3. 数组：

<div :class="[isActive ? 'active' : '', errorClass]"></div>

data() {
  return {
    isActive: true,
    errorClass: 'text-danger'
  }
}

4. 使用计算属性：

<div :class="computedClass"></div>

data() {
  return {
    isActive: true,
    hasSuccess: false
  }
},
computed: {
  computedClass() {
    return {
      active: this.isActive && !this.hasSuccess,
      'text-success': this.hasSuccess
    }
  }
}

以上代码展示了如何在Vue中根据条件动态地为元素添加或移除CSS类。