Vue'da CSS Sınıfları ile Nesne Tepkiselliği

CSS sınıfları ile nesne, elementlere tepkisel olarak sınıf atamak için uygun bir yöntemdir. Hadi bunun nasıl yapıldığına bakalım. Aşağıdaki CSS sınıf nesnesine sahip olduğumuzu varsayalım:

data() {
	return {
		styles: {
			done: false,
		},
	}
}

Bu nesneyi bir etikete bağlayalım:

<template>
	<p :class="styles">metin</p>
</template>

done sınıfının varlığının etiketteki metnin üstünü çizdiğini varsayalım:

p.done {
	text-decoration: line-through;
}

Tıklanıldığında stil nesnesini değiştirerek done sınıfını etkinleştiren bir buton yapalım:

<template>
	<button @click="setDone">gizle</button>
</template>

İlgili metodu yazalım:

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

Aşağıdaki CSS sınıf nesnesi verilmiştir:

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

Bu sınıfın varlığının elemanı gizlediğini varsayalım:

p.hidden {
	display: none;
}

Sınıf nesnesini bir metin etiketine uygulayın.

Elemanı gösteren bir buton yapın.

Elemanı gizleyen bir buton yapın.

Elemanı toggle eden (gizliyse gösteren, gösteriliyse gizleyen) bir buton yapın.