Reaktivnost objekta s CSS razredi v Vue

Objekt s CSS razredi je namenjen temu, da priročno reaktivno dodeljujemo razrede elementom. Poglejmo, kako se to naredi. Recimo, da imamo naslednji objekt z razredi:

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

Povežimo ta objekt z oznako:

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

Naj prisotnost razreda done prečrta besedilo oznake:

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

Naredimo gumb, katerega klik bo spremenil objekt s slogi, vključno z razredom done:

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

Napišimo ustrezen postopek:

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

Задание 1

Podan je naslednji objekt s CSS razredi:

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

Naj prisotnost tega razreda skrije element:

cssp.hidden {
  display: none;
}

Uporabite objekt z razredi na kateri koli oznaki z besedilom.

Задание 2

Naredite gumb, katerega klik bo pokazal element.

Задание 3

Naredite gumb, katerega klik bo skril element.

Задание 4

Naredite gumb, katerega klik bo preklopil element (pokazal, če je skrit; skril, če je prikazan).