CSS වර්ගයන් සහිත වස්තුවක් Vue හි ප්‍රතික්‍රියාශීලීතාවය

CSS වර්ගයන් සහිත වස්තුව නිර්මාණය කර ඇත්තේ අංගවලට වර්ග ප්‍රතික්‍රියාශීලී ලෙස පවරන්න පහසු වන පරිදිය. එය කරන ආකාරය අපි බලමු. අප සතුව පහත CSS වර්ග වස්තුව පවතිනවා යැයි සිතමු:

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

මෙම වස්තුව ටැගයකට බද්ධ කරමු:

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

done වර්ගය පවතී නම් එම ටැගයේ අකුරු හරස් ඉරිගසයි යැයි සිතමු:

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

තෝරන්නක් සාදමු. එය එබීමෙන් ශෛලීන් සහිත වස්තුව වෙනස් වී, done වර්ගය සක්‍රිය වේ:

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

අනුරූප ක්‍රමය ලියමු:

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

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

cssp.hidden {
  display: none;
}