Vuedə şərti göstərmə

Öyrənəcəyimiz növbəti direktiv v-if adlanır. Onun köməyi ilə elementləri göstərmək və ya gizlətmək olar. Bu direktiv necə işləyir: parametr kimi o, data obyektinin istənilən xassəsini qəbul edir. Əgər bu xassə true dəyərinə malikdirsə - element göstəriləcək, əgər false olarsa - gizlədiləcək.

Gəlin nümunəyə baxaq. Tutaq ki, v-if atributu olan bir abzasımız var. Bu atributun dəyəri visible xassəsi olsun, bunun kimi:

<template>
	<p v-if="visible">mətn</p>
</template>

Gəlin xassəmizin dəyərini true təyin edək. Bu halda abzas göstəriləcək:

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

Amma əgər visible false dəyərinə qoyularsa, onda abzas gizlədiləcək:

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

Tutaq ki, data-də visible xassəsi saxlanılır. Tutaq ki, sizin də iki abzasınız var. Elə edin ki, birinci abzas ekranda görünsün, əgər visible xassəsi true-a bərabərdirsə, ikinci abzas isə, əksinə, visible xassəsi false-a bərabər olduqda görünsün.