Σύνθετες συνθήκες στο Vue

Στην οδηγία v-if μπορούμε να δημιουργήσουμε πιο σύνθετες συνθήκες. Ας υποθέσουμε, για παράδειγμα, ότι στην ιδιότητα num μπορεί να υπάρχει ένας από τους αριθμούς 1, 2 ή 3:

data() {
	return {
		num: 3, // ας υποθέσουμε ότι είναι 3 τώρα
	}
}

Ας δημιουργήσουμε τρεις παραγράφους, από τους οποίους θα εμφανίζεται μόνο ένας ανάλογα με την τιμή της ιδιότητας num:

<template>
	<p v-if="num === 1">one</p>
	<p v-if="num === 2">two</p>
	<p v-if="num === 3">three</p>
</template>

Μπορούμε να δημιουργήσουμε ακόμη πιο σύνθετες συνθήκες:

<template>
	<p v-if="num === 1 || num === 3">
		one or two
	</p>
</template>

Δίνεται η ιδιότητα day, στην οποία καταγράφεται η τρέχουσα ημέρα της εβδομάδας. Ας υποθέσουμε επίσης ότι έχετε επτά παραγράφους, σε καθέναν από τους οποίους γράφεται το όνομα μιας ημέρας της εβδομάδας. Κάντε έτσι ώστε στην οθόνη να είναι ορατή μόνο η παράγραφος που περιέχει το όνομα της τρέχουσας ημέρας της εβδομάδας.