CSS klasių objektas Vue

CSS klasės taip pat gali būti saugomos objektuose. Šiuo atveju klasių pavadinimai bus objekto raktai, o objekto elementai bus loginės reikšmės. Jei reikšmė bus true, tada klasė bus pridėta prie elemento, o jei false, tai nebus.

Pabandykime praktiškai. Tarkime, kad turime šį objektą su klasėmis:

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

Pririškime šį objektą prie elemento:

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

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