Objekt s CSS razredi v Vue

CSS razredi lahko shranjeni tudi v objektih. Pri tem so imena razredov ključi objekta, elementi objekta pa so logične vrednosti. Če je vrednost true, bo razred dodan elementu, če pa false, pa ne bo.

Poskusimo v praksi. Naj imamo naslednji objekt z razredi:

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

Povežimo ta objekt z oznako:

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

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