Vue-də CSS sinifləri ilə obyektin reaktivliyi

CSS sinifləri olan obyekt, elementlərə sinifləri reaktiv şəkildə təyin etməyi rahatlaşdırmaq üçün nəzərdə tutulub. Gəlin bunun necə edildiyinə baxaq. Tutaq ki, bizdə aşağıdakı siniflər obyekti var:

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

Gəlin bu obyekti teq-ə bağlayaq:

App.vue<template>
  <p :class="styles">mətn</p>
</template>

Tutaq ki, done sinfinin olması mətni üstündən xətt çəkir:

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

Gəlin kliklədikdə stil obyektini dəyişərək, done sinfini aktivləşdirən bir düymə edək:

App.vue<template>
  <button @click="setDone">gizlət</button>
</template>

Uyğun metodu yazaq:

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

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

cssp.hidden {
  display: none;
}