CSS-klasside objekt Vue'is

CSS-klassid võivad samuti olla salvestatud objektidesse. Sel juhul on klasside nimed objekti võtmeteks ja objekti elemendid on loogilised väärtused. Kui väärtus on true, siis klass lisatakse elemendile, ja kui false, siis mitte.

Proovime seda praktikas. Oletame, et meil on järgmine objekt klassidega:

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

Seome selle objekti silti:

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

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