CSS klaseņu objekts Vue

CSS klases var arī tikt glabātas objektos. Šajā gadījumā klases nosaukumi būs objekta atslēgas, bet objekta elementu vērtības būs loģiskās vērtības. Ja vērtība ir true, tad klase tiks pievienota elementam, bet ja false, tad netiks.

Izmēģināsim to praksē. Pieņemsim, ka mums ir šāds objekts ar klasēm:

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

Piesaistīsim šo objektu elementam:

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

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