Uwiano wa Kitu na Madarasa ya CSS katika Vue

Kitu chenye madarasa ya CSS imekusudiwa ili iwe rahisi kubainisha madarasa kwa vipengele kwa njia inayobadilika. Wacha tuone jinsi hii inafanyika. Tuchukulie tuna kitu kifuatacho chenye madarasa:

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

Wacha tuunganishe kitu hiki kwa kitambulishi:

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

Tuchukulie kuwapo kwa darasa done kunavua mstari maandishi ya kitambulishi:

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

Wacha tutengeneze kifungo, kubonyeza ambacho atabadilisha kitu chenye mitindo, kuwasha darasa done:

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

Wacha tuandike mbinu inayofanana:

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

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

cssp.hidden {
  display: none;
}