Objek met CSS klasse in Vue
CSS klasse kan ook in
objekte gestoor word. In hierdie geval sal die klassename
die sleutels van die objek wees, en die elemente van
die objek sal Booleaanse waardes wees.
Indien die waarde true is,
sal die klas by die element gevoeg word,
en indien false, sal dit nie wees nie.
Kom ons probeer dit in die praktyk. Laat ons die volgende objek met klasse hê:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Laat ons hierdie objek aan 'n etiket bind:
<template>
<p :class="obj">text</p>
</template>
Die volgende objek met CSS klasse word gegee:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Pas hierdie klasse by 'n etiket toe. Gaan na watter klasse toegepas is, en watter nie.