Η οδηγία v-else-if στο Vue
Αντί για πολλαπλά v-if μπορείτε να χρησιμοποιήσετε
δομές v-else-if:
<template>
<p v-if="num == 1">one</p>
<p v-else-if="num == 2">two</p>
<p v-else-if="num == 3">three</p>
<p v-else>error</p>
</template>
Ας υποθέσουμε ότι στο data αποθηκεύεται το ακόλουθο:
data() {
age: 25,
}
Αν η ιδιότητα age είναι μικρότερη από 18 - εμφανίστε
στην οθόνη 'έφηβος', αν είναι από
19 έως 25 - εμφανίστε στην οθόνη 'νέος
άνθρωπος', ενώ αν είναι πάνω από 26 - εμφανίστε
στην οθόνη 'άνδρας'.