Απόδοση/Εμφάνιση υπό όρους στο Vue με v-if, v-show, v-else και v-else-if

Εισαγωγή

Το Vue.js είναι ένα απλό πλαίσιο εφαρμογών ιστού για τη δημιουργία δυναμικών διεπαφών Ιστού και Εφαρμογές μιας σελίδας (SPA). Καθώς δημιουργούμε αυτές τις εφαρμογές, πολλές φορές, το θέλουμε αποδίδουν κάτι με βάση συγκεκριμένα κριτήρια – αυτή είναι η ουσία της υπό όρους απόδοσης.

Η απόδοση υπό όρους αναφέρεται στη δυνατότητα απόδοσης διακριτής σήμανσης διεπαφής χρήστη (UI) με βάση το αν μια συνθήκη είναι αληθής ή όχι. Αυτή η έννοια χρησιμοποιείται συχνά σε περιβάλλοντα όπως η εμφάνιση ή η απόκρυψη στοιχείων (εναλλαγή), η εναλλαγή λειτουργιών εφαρμογής, ο χειρισμός του ελέγχου ταυτότητας και της εξουσιοδότησης και πολλά άλλα.

Σε αυτό το άρθρο, θα εξετάσουμε διάφορους τρόπους απόδοσης υπό όρους στο Vue.js χρησιμοποιώντας το v-if, v-else-if, να v-else οδηγίες. Θα ρίξουμε επίσης μια ματιά σε μερικά παραδείγματα και θα τονίσουμε τη διαφορά μεταξύ των v-if και v-show.

v-αν

Η v-if οδηγία χρησιμοποιείται για να υπό όρους απόδοση ενός μπλοκ εννοώντας το μπλοκ με το v-if χαρακτηριστικό θα είναι μόνο παράγεται εάν η έκφραση της οδηγίας επιστρέφει α true αξία. Εάν η έκφραση παράγει ένα μη έγκυρο αποτέλεσμα (για παράδειγμα, null, 0, κενή συμβολοσειρά, false), το στοιχείο είναι διαγράφηκε από το DOM.

Ας επεξηγήσουμε αυτή τη συμπεριφορά στο πρακτικό παράδειγμα:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Από login έχει οριστεί σε true, τη <div> μπλοκ που περιέχει v-if θα παραχθεί, έτσι θα εμφανιστεί.

v-αν vs v-show

Αξίζει να σημειωθεί ότι το v-show θα λειτουργούσε επίσης στο παραπάνω παράδειγμα και θα λειτουργούσε φαινομενικά πανομοιότυπα, αλλά υπάρχει μια διάκριση μεταξύ των δύο.

v-if αποδίδει υπό όρους ένα στοιχείο, ενώ v-show εμφανίζει/εμφανίζει υπό όρους ένα στοιχείο.

Αυτό σημαίνει ότι όταν η υπό όρους εναλλάσσεται, v-if θα διαγράψει και θα επαναφέρει πραγματικά στοιχεία wile v-show απλώς τα κάνει αόρατα ή ορατά. Το παρακάτω κινούμενο σχέδιο δείχνει πώς v-if ουσιαστικά διαγράφει και αναπαράγει μπλοκ κώδικα:

Εν τω μεταξύ, v-show θα διατηρεί πάντα το στοιχείο στο DOM και απλώς θα αλλάζει το CSS του για να αλλάξει την εμφάνισή του (ρυθμίζοντας το display προς την none):

v-άλλο

Η v-else οδηγία είναι α v-if οδηγία που σας επιτρέπει να προσαρμόσετε το false αξία σε αποδόσεις υπό όρους. Αν δεν είναι true, Μπορείτε να χρησιμοποιήσετε v-else για να ορίσουμε τι πρέπει να συμβεί.

Για παράδειγμα, ας υποθέσουμε ότι έχουμε εισαγωγή κωδικού πρόσβασης και θέλουμε να παράγει ένα μήνυμα σφάλματος, "Αδύναμος κωδικός", εάν το μήκος της εισόδου είναι μικρότερο από 6 ή οθόνη "Ισχυρός κωδικός πρόσβασης" αν το μήκος είναι μεγαλύτερο από 6.

Αυτή είναι μια απόδοση υπό όρους, με μια επιλογή για το χειρισμό της ψευδούς υπόθεσης:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Ας το χρησιμοποιήσουμε για να αλλάξουμε τα περιεχόμενα μιας απλής σελίδας σύνδεσης, ώστε να αλλάζει το μήνυμα με βάση το εάν ένας χρήστης είναι συνδεδεμένος ή όχι. Θα τροποποιήσουμε τη διατύπωση του κουμπιού με βάση το userLoggedIn κατάσταση επίσης:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Το συμβάν κλικ του κουμπιού θα αλλάξει userLoggedIn στοιχείο δεδομένων και αυτό θα επηρεάσει τα δεδομένα που εμφανίζονται όπως φαίνεται παρακάτω:

v-άλλο-αν

v-else-if extends a v-if με ένα else...if ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Αυτό είναι παρόμοιο με αυτό της JavaScript else...if μπλοκ στο ότι μας επιτρέπει να προσθέσουμε μια εντολή if σε μια υπάρχουσα v-if. Αυτό χρησιμοποιείται όταν υπάρχουν πολλά κριτήρια προς έλεγχο και μπορεί να συνδεθεί πολλές φορές:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Συμπέρασμα

Σε αυτό το άρθρο, είδαμε πώς να αποδίδουμε υπό όρους ένα στοιχείο με v-if, v-else, να v-else-if. Εξηγήσαμε επίσης τη διαφορά μεταξύ v-if και v-show.

• Coinsmart. Το καλύτερο ανταλλακτήριο Bitcoin και Crypto στην Ευρώπη.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. ΕΛΕΥΘΕΡΗ ΠΡΟΣΒΑΣΗ.
• CryptoHawk. Ραντάρ Altcoin. Δωρεάν δοκιμή.
• Πηγή: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/