Vue-ում CSS դասերով օբյեկտի ռեակտիվություն

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