Реактивност објекта са CSS класама у Vue-у

Објекат са CSS класама је намењен томе да се удобно могу реактивно додељивати класе елементима. Погледајмо како се то ради. Нека имамо следећи објекат са класама:

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

Привежимо овај објекат за таг:

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

Нека присуство класе done прецрта текст тага:

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

Направимо дугме, чији ће клик мењати објекат са стиловима, укључујући класу done:

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

Написаћемо одговарајући метод:

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

Задание 1

Дат је следећи објекат са CSS класама:

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

Нека присуство ове класе сакрива елемент:

cssp.hidden {
  display: none;
}

Примените објекат са класама на неки таг са текстом.

Задание 2

Направите дугме, чији ће клик приказати елемент.

Задание 3

Направите дугме, чији ће клик сакрити елемент.

Задание 4

Направите дугме, чији ће клик преокренути стање елемента (приказати, ако је сакривен; сакрити, ако је приказан).