CSS-luokkaolio Vuesa

CSS-luokat voivat myös tallentua olioihin. Tässä tapauksessa luokkien nimet ovat olion avaimia ja olion elementit ovat loogisia arvoja. Jos arvo on true, luokka lisätään elementtiin, ja jos false, niin sitä ei lisätä.

Kokeillaan käytännössä. Oletetaan, että meillä on seuraava luokkaolio:

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

Sidotaan tämä olio tagiin:

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

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