Reaktivnost objekta sa CSS klasama u Vue

Objekat sa CSS klasama je namenjen da se na pogodan način reaktivno dodeljuju klase elementima. Pogledajmo kako se to radi. Neka imamo sledeći objekat sa klasama:

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

Povežimo ovaj objekat sa tagom:

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

Neka prisustvo klase done precrtava tekst taga:

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

Napravimo dugme, čiji će klik promeniti objekat sa stilovima, uključujući klasu done:

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

Napišimo odgovarajuću metodu:

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

Задание 1

Dat je sledeći objekat sa CSS klasama:

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

Neka prisustvo ove klase sakriva element:

cssp.hidden {
  display: none;
}

Primenite objekat sa klasama na nekom tagu sa tekstom.

Задание 2

Napravite dugme, čiji će klik prikazati element.

Задание 3

Napravite dugme, čiji će klik sakriti element.

Задание 4

Napravite dugme, čiji će klik toglovati element (prikazati, ako je sakriven; sakriti, ako je prikazan).