CSS osztályokkal rendelkező objektum reaktivitása Vue-ban

A CSS osztályokkal rendelkező objektum arra szolgál, hogy kényelmesen lehessen reaktívan osztályokat hozzárendelni az elemekhez. Nézzük meg, hogyan is történik ez. Tegyük fel, hogy a következő osztályobjektumunk van:

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

Kössük ezt az objektumot egy tag-hez:

App.vue<template>
  <p :class="styles">szöveg</p>
</template>

Tegyük fel, hogy a done osztály jelenléte áthúzza a tag szövegét:

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

Készítsünk egy gombot, amelyre kattintva megváltozik a stílusobjektum, beváltva a done osztályt:

App.vue<template>
  <button @click="setDone">elrejt</button>
</template>

Írjuk meg a megfelelő metódust:

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

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

cssp.hidden {
  display: none;
}