Objekt med CSS-klasser i Vue

CSS-klasser kan också lagras i objekt. I detta fall kommer klassnamnen att vara objektets nycklar, och elementen i objektet kommer att vara booleska värden. Om värdet är true, kommer klassen att läggas till elementet, och om det är false, kommer det inte att göras.

Låt oss prova i praktiken. Antag att vi har följande objekt med klasser:

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

Låt oss binda detta objekt till en tagg:

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

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