ობიექტის რეაქტიულობა CSS კლასებთან Vue-ში

CSS კლასების მქონე ობიექტი განკუთვნილია იმისთვის, რომ მოხერხებულად იყოს ელემენტებს რეაქტიულად მინიჭებული კლასები. მოდით ვნახოთ, როგორ კეთდება ეს. მაგალითად, გვქონდეს შემდეგი ობიექტი კლასებით:

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

მოდით, ეს ობიექტი მივაბათ თეგს:

App.vue<template>
  <p :class="styles">ტექსტი</p>
</template>

დაე, done კლასის არსებობამ გადახაზოს თეგის ტექსტი:

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

შევქმნათ ღილაკი, რომლის დაჭერაც შეცვლის სტილების ობიექტს, ჩართავს done კლასს:

App.vue<template>
  <button @click="setDone">დამალვა</button>
</template>

დავწეროთ შესაბამისი მეთოდი:

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

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

cssp.hidden {
  display: none;
}