CSS դասերով օբյեկտը Vue-ում
CSS դասերը կարող են նաև պահվել
օբյեկտներում: Այս դեպքում դասերի անունները
կլինեն օբյեկտի բանալիները, իսկ օբյեկտի
տարրերը կլինեն տրամաբանական արժեքներ:
Եթե արժեքը կլինի true,
ապա դասը կավելացվի էլեմենտին,
իսկ եթե false, ապա ոչ:
Եկեք փորձենք գործնականում: Ենթադրենք ունենք հետևյալ օբյեկտը դասերով.
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Կապենք այս օբյեկտը թեգի հետ.
<template>
<p :class="obj">տեքստ</p>
</template>
Տրված է հետևյալ օբյեկտը CSS դասերով.
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Կիրառեք այս դասերը ինչ-որ թեգի վրա: Ստուգեք, թե որ դասերն են կիրառվել, իսկ որոնք՝ ոչ:
