Vue'da data ile CSS Sınıfları
CSS sınıfları öğeye
data nesnesinin özellik değerlerine
bağlı olarak eklenebilir.
Bir örnekle inceleyelim. Aşağıdaki
özelliklere sahip olduğumuzu varsayalım:
data() {
return {
isActive: true,
hasError: true,
}
}
Özelliklerimizin değerine bağlı olarak öğeye CSS sınıfları ekleyelim:
<template>
<p :class="{active: isActive, error: hasError}">
text
</p>
</template>
Aşağıdaki özellikler verilmiştir:
data() {
return {
isValid: true,
isDisabled: true,
}
}
Bu özelliklerin değerlerine bağlı olarak etiketine ilgili CSS sınıflarının eklenmesini sağlayın.
