Inline object with CSS classes in Vue
An object with CSS classes can be written directly as the value of the class attribute:
<template>
<p :class="{active: true, error: false}">
text
</p>
</template>
Classes whose names contain a hyphen must be enclosed in quotation marks:
<template>
<p :class="{active: true, 'has-error': false}">
text
</p>
</template>
Given the following object with CSS classes:
{active: true, valid: false}
Apply this object to some tag.