From https://vuejs.org/v2/guide/class-and-style.html

vue-classObj.js

// This will render the same result. We can also bind to a computed property that returns an object. This is a common and powerful pattern:
// HTML
<div v-bind:class="classObject"></div>

// JS
data: {
  isActive: true, error
:
  null
}
,
computed: {
  classObject: function () {
    return {active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal',}
  }
}