Reaktywność obiektu z klasami CSS w Vue

Obiekt z klasami CSS jest przeznaczony do tego, aby wygodnie reaktywnie przypisywać klasy elementom. Spójrzmy, jak to się robi. Załóżmy, że mamy następujący obiekt z klasami:

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

Powiążmy ten obiekt z tagiem:

App.vue<template>
  <p :class="styles">tekst</p>
</template>

Załóżmy, że obecność klasy done przekreśla tekst tagu:

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

Zróbmy przycisk, którego naciśnięcie będzie zmieniać obiekt ze stylami, włączając klasę done:

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

Napiszmy odpowiednią metodę:

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

Задание 1

Dany jest następujący obiekt z klasami CSS:

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

Załóżmy, że obecność tej klasy ukrywa element:

cssp.hidden {
  display: none;
}

Zastosuj obiekt z klasami do jakiegoś tagu z tekstem.

Задание 2

Zrób przycisk, którego naciśnięcie będzie pokazywać element.

Задание 3

Zrób przycisk, którego naciśnięcie będzie ukrywać element.

Задание 4

Zrób przycisk, którego naciśnięcie będzie przełączać element (pokazywać, jeśli ukryty; ukrywać, jeśli pokazany).