Reaktivita objektu s CSS třídami ve Vue

Objekt s CSS třídami je určen k tomu, aby bylo pohodlně reaktivně přiřazovat třídy prvkům. Podívejme se, jak se to dělá. Předpokládejme, že máme následující objekt s třídami:

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

Přivažme tento objekt k tagu:

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

Předpokládejme, že přítomnost třídy done přeškrtne text tagu:

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

Vytvořme tlačítko, jehož kliknutí změní objekt se styly, zapne třídu done:

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

Napišme odpovídající metodu:

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

Задание 1

Je dán následující objekt s CSS třídami:

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

Předpokládejme, že přítomnost této třídy skryje prvek:

cssp.hidden {
  display: none;
}

Aplikujte objekt s třídami na nějaký tag s textem.

Задание 2

Vytvořte tlačítko, jehož kliknutí prvek zobrazí.

Задание 3

Vytvořte tlačítko, jehož kliknutí prvek skryje.

Задание 4

Vytvořte tlačítko, jehož kliknutí prvek přepne (zobrazí, pokud je skrytý; skryje, pokud je zobrazený).