Reaktivita objektu s CSS triedami vo Vue

Objekt s CSS triedami je určený na to, aby bolo pohodlne reaktyvne priraďovať triedy elementom. Pozrime sa, ako sa to robí. Majme nasledujúci objekt s triedami:

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

Previažme tento objekt k tagu:

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

Nech prítomnosť triedy done preškrtáva text tagu:

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

Urobme tlačidlo, kliknutie na ktoré zmení objekt so štýlmi, zapínajúc triedu done:

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

Napíšme zodpovedajúcu metódu:

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

Задание 1

Daný je nasledujúci objekt s CSS triedami:

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

Nech prítomnosť tejto triedy skryje element:

cssp.hidden {
  display: none;
}

Aplikujte objekt s triedami na nejaký tag s textom.

Задание 2

Urobte tlačidlo, kliknutie na ktoré zobrazí element.

Задание 3

Urobte tlačidlo, kliknutie na ktoré skryje element.

Задание 4

Urobte tlačidlo, kliknutie na ktoré bude prepínať element (zobraziť, ak je skrytý; skryť, ak je zobrazený).