Objeto inline com classes CSS em Vue

Um objeto com classes CSS pode ser escrito diretamente como o valor do atributo class:

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

Classes cujos nomes contêm hífen devem ser colocadas entre aspas:

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

javascript{active: true, valid: false}