Vue'da CSS Sınıfları ile Nesne Tepkiselliği

CSS sınıfları ile nesne, elementlere tepkisel olarak sınıf atamak için uygun bir yöntemdir. Hadi bunun nasıl yapıldığına bakalım. Aşağıdaki CSS sınıf nesnesine sahip olduğumuzu varsayalım:

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

Bu nesneyi bir etikete bağlayalım:

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

done sınıfının varlığının etiketteki metnin üstünü çizdiğini varsayalım:

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

Tıklanıldığında stil nesnesini değiştirerek done sınıfını etkinleştiren bir buton yapalım:

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

İlgili metodu yazalım:

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

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

cssp.hidden {
  display: none;
}