Αντίδραση Αντικειμένου με CSS Κλάσεις στο Vue

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

javascriptdata() {
  return {
    styles: {
      done: false,
    },
  }
}

Ας δέσουμε αυτό το αντικείμενο σε μια ετικέτα:

App.vue<template>
  <p :class="styles">κείμενο</p>
</template>

Ας υποθέσουμε ότι η παρουσία της κλάσης done διαγράφει το κείμενο της ετικέτας:

cssp.done {
  text-decoration: line-through;
}

Ας δημιουργήσουμε ένα κουμπί, το πάτημα του οποίου θα αλλάζει το αντικείμενο με τα στυλ, ενεργοποιώντας την κλάση done:

App.vue<template>
  <button @click="setDone">απόκρυψη</button>
</template>

Ας γράψουμε την αντίστοιχη μέθοδο:

App.vuemethods: {
  setDone: function() {
    this.styles.done = true;
  }
}

javascriptdata() {
  return {
    obj: {
      hidden: true,
    },
  }
}

cssp.hidden {
  display: none;
}