Objektu ar CSS klasēm reaktivitāte Vue

Objekts ar CSS klasēm ir paredzēts tam, lai ērti varētu reaktīvi piešķirt klases elementiem. Apskatīsim, kā tas tiek darīts. Pieņemsim, ka mums ir šāds objekts ar klasēm:

javascriptdata() {
  return {
    styles: {
      done: false,
    },
  }
}

Piesaistīsim šo objektu tagam:

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

Pieņemsim, ka klases done klātbūtne nosvītro teksta tagu:

cssp.done {
  text-decoration: line-through;
}

Izveidosim pogu, kuras nospiešana mainīs objektu ar stiliem, ieslēdzot klasi done:

App.vue<template>
  <button @click="setDone">hide</button>
</template>

Uzrakstīsim atbilstošo metodi:

App.vuemethods: {
  setDone: function() {
    this.styles.done = true;
  }
}

javascriptdata() {
  return {
    obj: {
      hidden: true,
    },
  }
}

cssp.hidden {
  display: none;
}