CSS դասերով օբյեկտը Vue-ում

CSS դասերը կարող են նաև պահվել օբյեկտներում: Այս դեպքում դասերի անունները կլինեն օբյեկտի բանալիները, իսկ օբյեկտի տարրերը կլինեն տրամաբանական արժեքներ: Եթե արժեքը կլինի true, ապա դասը կավելացվի էլեմենտին, իսկ եթե false, ապա ոչ:

Եկեք փորձենք գործնականում: Ենթադրենք ունենք հետևյալ օբյեկտը դասերով.

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

Կապենք այս օբյեկտը թեգի հետ.

App.vue<template>
  <p :class="obj">տեքստ</p>
</template>

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