Inline object with CSS classes in Vue

An object with CSS classes can be written directly as the value of the class attribute:

App.vue<template>
  <p :class="{active: true, error: false}">
    text
  </p>
</template>

Classes whose names contain a hyphen must be enclosed in quotation marks:

App.vue<template>
  <p :class="{active: true, 'has-error': false}">
    text
  </p>
</template>

javascript{active: true, valid: false}