CSS κλάσεις μέσω data στο Vue

Οι CSS κλάσεις μπορούν να προστεθούν σε ένα στοιχείο ανάλογα με τις τιμές των ιδιοτήτων του αντικειμένου data. Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε τις ακόλουθες ιδιότητες:

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

Ας προσθέσουμε CSS κλάσεις στο στοιχείο ανάλογα με την τιμή των ιδιοτήτων μας:

App.vue<template>
  <p :class="{active: isActive, error: hasError}">
    κείμενο
  </p>
</template>

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