Vue-da CSS klasslarni data orqali qo'llash
CSS klasslarni elementga
data obyektining xususiyatlari
qiymatlariga qarab qo'shish mumkin.
Keling, bir misol ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi
xususiyatlar mavjud:
data() {
return {
isActive: true,
hasError: true,
}
}
Elementga CSS klasslarni xususiyatlarimizning qiymatiga qarab qo'shamiz:
<template>
<p :class="{active: isActive, error: hasError}">
matn
</p>
</template>
Quyidagi xususiyatlar berilgan:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Ushbu xususiyatlar qiymatlariga qarab tegga mos keladigan CSS klasslarni qo'shing.
