Vue-da CSS klasslari bilan obyekt reaktivligi

CSS klasslari bilan obyekt elementlarga klasslarni qulay tarzda reaktiv ravishda tayinlash uchun mo'ljallangan. Keling, buni qanday qilinishini ko'ramiz. Faraz qilaylik, bizda quyidagi klasslar bilan obyekt mavjud:

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

Keling, ushbu obyektni tegga bog'laymiz:

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

Faraz qilaylik, done klassining mavjudligi teg matnini chizib tashlaydi:

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

Keling, bosilganda uslublar obyektini o'zgartirib, done klassini yoqadigan tugma yarataylik:

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

Keling, mos keladigan metodni yozamiz:

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

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

cssp.hidden {
  display: none;
}