Objekt med CSS-klasser i Vue

CSS-klasser kan også lagres i objekter. I dette tilfælde vil klassernavnene være nøglerne i objektet, og elementerne i objektet vil være boolske værdier. Hvis værdien er true, vil klassen blive tilføjet til elementet, og hvis false, så vil den ikke.

Lad os prøve det i praksis. Lad os sige, at vi har følgende objekt med klasser:

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

Lad os binde dette objekt til tagget:

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

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