Реактивии объект бо 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;
  }
}

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

cssp.hidden {
  display: none;
}