CSS синфҳо тавассути data дар Vue
CSS синфҳоро ба унсури
вобаста ба қиматҳои хосиятҳои
объекти data илова кардан мумкин аст.
Биёед ба мисол нигарем. Бигзор мо хосиятҳои
зеринро дорем:
data() {
return {
isActive: true,
hasError: true,
}
}
Ба унсур CSS синфҳоро вобаста ба қимати хосиятҳои мо илова кунем:
<template>
<p :class="{active: isActive, error: hasError}">
матн
</p>
</template>
Хосиятҳои зерин дода шудаанд:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Чунон кунед, ки вобаста ба қиматҳои ин хосиятҳо ба тег CSS синфҳои мувофиқ илова шаванд.
