עיבוד/תצוגה מותנה ב-Vue עם v-if, v-show, v-else ו-v-else-if

מבוא

Vue.js היא מסגרת פשוטה של ​​אפליקציית אינטרנט ליצירת ממשקי אינטרנט דינמיים ו אפליקציות לדף בודד (ספא). כשאנחנו יוצרים את האפליקציות האלה, לעתים קרובות, אנחנו רוצים להציג משהו על סמך קריטריון מסוים – זוהי המהות של עיבוד מותנה.

עיבוד מותנה מתייחס ליכולת להציג סימון ממשק משתמש (UI) מובחן בהתבסס על האם תנאי הוא אמיתי או לא. מושג זה משמש לעתים קרובות בהקשרים כמו הצגה או הסתרה של רכיבים (החלפת מצב), החלפת פונקציונליות של יישומים, טיפול באימות והרשאה ועוד רבים נוספים.

במאמר זה, נבחן דרכים שונות לעיבוד מותנה ב-Vue.js על ידי שימוש ב- v-if, v-else-if, ו v-else הנחיות. נסקור גם כמה דוגמאות ונדגיש את ההבדל בין v-if ו v-show.

v-if

השמיים 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-if vs v-show

ראוי לציין כי ה- v-show יעבוד גם בדוגמה שלמעלה ויפעל לכאורה באופן זהה, אבל יש הבחנה בין השניים.

v-if מעבד באופן מותנה אלמנט, ואילו v-show מציג/מציג באופן מותנה יסוד.

זה מרמז שכאשר התנאי מוחלף, v-if למעשה ימחק וישחזר רכיבים wile v-show רק הופך אותם לבלתי נראים או גלויים. האנימציה הבאה ממחישה כיצד v-if למעשה מוחק ומשחזר קוביות קוד:

בינתיים, v-show תמיד ישמור על האלמנט ב-DOM ופשוט ישנה את ה-CSS שלו כדי לשנות את המראה שלו (על ידי הגדרתו display ל none):

v-else

השמיים v-else ההנחיה היא א v-if הנחיה המאפשרת לך להתאים אישית את false ערך בעיבודים מותנים. אם זה לא true, אתה יכול להשתמש v-else להגדיר מה צריך לקרות במקום.

לדוגמה, נניח שיש לנו קלט סיסמה, ואנו רוצים שהיא תפיק הודעת שגיאה, "ססמה חלשה", אם אורך הקלט קטן מ-6 או תצוגה "סיסמא חזקה" אם האורך גדול מ-6.

זהו עיבוד מותנה, עם אפשרות לטיפול ב-false-case:

<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-else-if

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. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/