CSS වර්ගයන් සහිත වස්තුවක් Vue හි ප්රතික්රියාශීලීතාවය
CSS වර්ගයන් සහිත වස්තුව නිර්මාණය කර ඇත්තේ අංගවලට වර්ග ප්රතික්රියාශීලී ලෙස පවරන්න පහසු වන පරිදිය. එය කරන ආකාරය අපි බලමු. අප සතුව පහත CSS වර්ග වස්තුව පවතිනවා යැයි සිතමු:
data() {
return {
styles: {
done: false,
},
}
}
මෙම වස්තුව ටැගයකට බද්ධ කරමු:
<template>
<p :class="styles">text</p>
</template>
done වර්ගය පවතී නම්
එම ටැගයේ අකුරු හරස් ඉරිගසයි යැයි සිතමු:
p.done {
text-decoration: line-through;
}
තෝරන්නක් සාදමු. එය එබීමෙන්
ශෛලීන් සහිත වස්තුව වෙනස් වී,
done වර්ගය සක්රිය වේ:
<template>
<button @click="setDone">hide</button>
</template>
අනුරූප ක්රමය ලියමු:
methods: {
setDone: function() {
this.styles.done = true;
}
}
පහත CSS වර්ග වස්තුව ලබා දී ඇත:
data() {
return {
obj: {
hidden: true,
},
}
}
මෙම වර්ගය පවතී නම් එම අංගය සැඟවී යන බව සිතමු:
p.hidden {
display: none;
}
CSS වර්ග වස්තුව කිසියම් ටෙක්ස්ට් ටැගයකට යොදන්න.
තෝරන්නක් සාදන්න. එය එබීමෙන් අංගය පෙන්වයි.
තෝරන්නක් සාදන්න. එය එබීමෙන් අංගය සඟවයි.
තෝරන්නක් සාදන්න. එය එබීමෙන් අංගය ටොගල් කරයි (සැඟවී ඇත්නම් පෙන්වයි; පෙන්වා ඇත්නම් සඟවයි).
