Objek met CSS klasse in Vue

CSS klasse kan ook in objekte gestoor word. In hierdie geval sal die klassename die sleutels van die objek wees, en die elemente van die objek sal Booleaanse waardes wees. Indien die waarde true is, sal die klas by die element gevoeg word, en indien false, sal dit nie wees nie.

Kom ons probeer dit in die praktyk. Laat ons die volgende objek met klasse hê:

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

Laat ons hierdie objek aan 'n etiket bind:

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

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