Objekat sa CSS klasama u Vue

CSS klase se takođe mogu čuvati u objektima. Pri tome, imena klasa će biti ključevi objekta, a elementi objekta će biti logičke vrednosti. Ako je vrednost true, klasa će biti dodata elementu, a ako je false, neće.

Hajde da probamo u praksi. Neka imamo sledeći objekat sa klasama:

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

Povežimo ovaj objekat sa tagom:

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

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