Objekt med CSS-klasser i Vue

CSS-klasser kan også lagres i objekter. I dette tilfellet vil klassennavnene være nøklene til objektet, og elementene i objektet vil være boolske verdier. Hvis verdien er true, vil klassen bli lagt til elementet, og hvis false, vil den ikke bli det.

La oss prøve i praksis. La oss si at vi har følgende objekt med klasser:

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

La oss binde dette objektet til en tagg:

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

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