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