პირობითი ჩვენება Vue-ში

შემდეგი დირექტივა, რომელსაც შევისწავლით, ეწოდება v-if. მისი საშუალებით შესაძლებელია ელემენტების ჩვენება ან დამალვა. როგორ მუშაობს ეს დირექტივა: პარამეტრად ის იღებს ობიექტის data ნებისმიერ თვისებას. თუ ამ თვისების მნიშვნელობაა true - მაშინ ელემენტი გამოჩნდება, ხოლო თუ false - მაშინ დაიმალება.

მოდით, მაგალითზე ვნახოთ. დავუშვათ, გვაქვს აბზაცი v-if ატრიბუტით. ამ ატრიბუტის მნიშვნელობად იყოს visible თვისება, აი ასე:

<template>
	<p v-if="visible">ტექსტი</p>
</template>

მოდით, ჩვენი თვისების მნიშვნელობა true-ზე დავაყენოთ. ამ შემთხვევაში აბზაცი გამოჩნდება:

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

ხოლო თუ visible მნიშვნელობად false დავაყენებთ, აბზაცი დაიმალება:

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

დავუშვათ, data-ში ინახება visible თვისება. დავუშვათ, თქვენ ასევე გაქვთ ორი აბზაცი. გახადეთ ისე, რომ პირველი აბზაცი გამოჩნდეს ეკრანზე, თუ visible თვისება true-ის ტოლია, ხოლო მეორე აბზაცი, პირიქით, გამოჩნდეს, თუ თვისება visible false-ის ტოლია.