Vue'da CSS Sınıfı Nesnesi
CSS sınıfları ayrıca nesnelerde
tutulabilir. Bu durumda sınıf isimleri
nesnenin anahtarları olur ve nesnenin
elemanları mantıksal değerler olur.
Eğer değer true ise,
sınıf elemana eklenecektir,
eğer false ise, eklenmeyecektir.
Hadi pratikte deneyelim. Şu sınıf nesnemiz olduğunu varsayalım:
data() {
return {
obj: {
active: true,
valid: false,
},
}
}
Bu nesneyi bir etikete bağlayalım:
<template>
<p :class="obj">text</p>
</template>
Aşağıdaki CSS sınıfı nesnesi verilmiştir:
data() {
return {
obj: {
done: true,
selected: false,
},
}
}
Bu sınıfları bir etikete uygulayın. Hangi sınıfların uygulandığını, hangilerinin uygulanmadığını kontrol edin.
