Vue'da Koşula Göre Görüntüleme

İnceleyeceğimiz bir sonraki direktifin adı v-if. Onun yardımıyla öğeleri gösterebilir veya gizleyebiliriz. Bu direktif nasıl çalışır: parametre olarak data nesnesinin herhangi bir özelliğini alır. Eğer bu özellik true değerine sahipse - öğe görüntülenecek, eğer false ise - gizlenecektir.

Bir örnek üzerinden inceleyelim. Diyelim ki v-if özniteliğine sahip bir paragrafımız var. Bu özniteliğin değeri visible özelliği olsun, işte şu şekilde:

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

Özelliğimizin değerini true olarak ayarlayalım. Bu durumda paragraf görüntülenecek:

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

Ancak eğer visible özelliğine false değeri verilirse, paragraf gizlenecek:

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

data içinde visible özelliğinin saklandığını varsayalım. Ayrıca iki paragrafınız olduğunu varsayalım. İlk paragrafın, visible özelliği true olduğunda ekranda görünmesini, ikinci paragrafın ise, tam tersine, visible özelliği false olduğunda görünmesini sağlayın.