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;
}