CSS-klassen via data in Vue

CSS-klassen kunnen aan een element worden toegevoegd afhankelijk van de waarden van de eigenschappen van het data object. Laten we kijken naar een voorbeeld. Stel dat we de volgende eigenschappen hebben:

javascriptdata() {
  return {
    isActive: true,
    hasError: true,
  }
}

Laten we CSS-klassen aan het element toevoegen afhankelijk van de waarde van onze eigenschappen:

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

Задание 1

De volgende eigenschappen zijn gegeven:

javascriptdata() {
  return {
    isValid: true,
    isDisabled: true,
  }
}

Zorg ervoor dat, afhankelijk van de waarden van deze eigenschappen, de overeenkomstige CSS-klassen aan de tag worden toegevoegd.