Obiekt z klasami CSS w Vue

Klasy CSS mogą również być przechowywane w obiektach. W tym przypadku nazwy klas będą kluczami obiektu, a elementami obiektu będą wartości logiczne. Jeśli wartość będzie true, to klasa zostanie dodana do elementu, a jeśli false, to nie zostanie.

Spróbujmy w praktyce. Załóżmy, że mamy następujący obiekt z klasami:

javascriptdata() {
  return {
    obj: {
      active: true,
      valid:  false,
    },
  }
}

Przywiążmy ten obiekt do znacznika:

App.vue<template>
  <p :class="obj">text</p>
</template>

javascriptdata() {
  return {
    obj: {
      done: true,
      selected:  false,
    },
  }
}