Vue'de Reaktif Koşul

Koşulun reaktif olmasını sağlayalım. Örneğin, bir butona tıklandığında öğenin gizlenmesini sağlayalım. Aşağıdaki paragrafa sahip olduğumuzu varsayalım:

<template>
	<p v-if="visible">text</p>
</template>

Paragrafımızın başlangıçta görünür olmasını sağlayalım:

data() {
	return {
		visible: true,
	}
}

Şimdi, tıklandığında paragrafın gizleneceği bir buton yapalım:

<template>
	<button @click="hide">hide</button>
	<p v-if="visible">text</p>
</template>

Bağlanan metod, visible özelliğini false olarak değiştirecek ve böylece paragrafımızın gizlenmesine neden olacak:

methods: {
	hide: function() {
		this.visible = false;
	}
}

Bir paragraf ve bir buton verilmiştir. Paragraf başlangıçta gizli olsun. Paragrafı gösteren bir buton yapın.

Bir paragraf ve iki buton verilmiştir. İlk buton paragrafı göstersin, ikincisi ise onu gizlesin.

Önceki görevi, ekranda her zaman sadece bir butonun görünmesi için modifiye edin: eğer paragraf görünürse, gizleme butonu görünsün, eğer gizliyse - gösterme butonu görünsün.