Εμφάνιση βάσει συνθήκης στο Vue

Η επόμενη directive που θα μελετήσουμε ονομάζεται v-if. Με τη βοήθειά της μπορούμε να εμφανίζουμε ή να κρύβουμε στοιχεία. Πώς λειτουργεί αυτή η directive: ως παράμετρο δέχεται οποιαδήποτε ιδιότητα του αντικειμένου 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.