כיצד ליישם עיבוד מותנה ב-Vue.js

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

למד מה הן הנחיות Vue וכיצד להשתמש בהן כדי להשיג עיבוד מותנה ב-Vue.js.

מהן הנחיות Vue?

הנחיות Vue מאפשרות לך לשפר את ההתנהגות של רכיבי HTML בתבניות Vue.js על ידי הוספת תכונות ייחודיות להן.

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

בנוסף, Vue.js מאפשר לך ליצור הנחיות מותאמות אישית, מה שמאפשר לך ליצור בקלות פונקציות לשימוש חוזר עבור אפליקציות Vue.

מסגרת Vue מקדימה את ההנחיות שלה עם "v-" לפני שם ההוראה. דוגמאות להנחיות נפוצות ב-Vue כוללות v-on, v-bind, v-for, ו v-if.

מהו עיבוד מותנה?

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

ב-Vue.js, אתה יכול להשתמש בהנחיות כגון

v-if ו v-show כדי להשיג עיבוד מותנה באפליקציה שלך, שונה ממה שהיית עושה עיבוד תוכן מותנה ב-React.js.

השגת עיבוד מותנה עם ה-v-if Direktiv

דומה ל ה-JavaScript אחרת הַצהָרָה, ה v-if ההוראה ב-Vue.js מכילה תנאי. אם זה לא מרוצה, Vue.js מעריך את התנאי הבא שצוין ב-a v-else ההוראה וממשיך לעשות זאת עד שהיא עומדת בתנאי או מעריך את כל התנאים.

הנחיה זו מאפשרת לך לבצע רינדור מותנה של רכיב המבוסס על ערך בוליאני. מהדר Vue.js לא יציג את החלק אם הערך שלו שקרי.

הנה דוגמה לעיבוד תוכן מותנה עם v-if:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>מסמךכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<h1v-if='שֶׁקֶר' >{{ הודעה1 }}h1>
<h1v-else >{{ הודעה2 }}h1>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים () {
 החזר {
 message1: 'זהו אפליקציית Vue שלך.',
 message2: 'עדיין לא אפליקציית Vue.'
 }
 }
 })
 app.mount('#app')
תַסרִיט>
גוּף>
html>

בלוק הקוד למעלה מתאר אפליקציית Vue שנוצרה על ידי הוספת א רשת אספקת תוכן (CDN) קישור לגוף קובץ ה-HTML שלך. ההנחיה v-if תציג את האלמנט h1 רק אם המצב שלו נכון.

באפליקציות Vue, ישנם מצבים שבהם אתה צריך לעבד רכיב על סמך קריטריונים דינמיים ספציפיים. זה שימושי בתרחישים כגון הצגת מידע רק כאשר משתמש לוחץ על כפתור או הצגת מחוון טעינה בזמן טעינת הנתונים מ-API.

לדוגמה:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>אפליקציית Vueכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<divv-if="showUsers">
<ul>
<לי>משתמש 1לי>
<לי>משתמש 2לי>
ul>
div>
<לַחְצָןv-on: לחץ="toggleShowUsers()">
 החלף משתמשים
לַחְצָן>
<h1>{{ הודעה }}h1>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים () {
 החזר {
 showUsers: נכון,
 הודעה: 'זהו אפליקציית Vue שלך'.
 }
 },
 שיטות: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
תַסרִיט>
גוּף>
html>

בלוק הקוד לעיל משתמש ב- v-if הנחיה לעיבוד תוכן על בסיס ערך של משתנה בוליאני, showUsers.

ה div האלמנט מוצג אם הערך הוא נָכוֹן ונסתר אם כן שֶׁקֶר. לחיצה על החלף משתמשים כפתור מפעיל את toggleShowUsers() שיטה לשנות את הערך של showUsers.

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

השגת עיבוד מותנה עם ה-v-show Direktiv

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

ה v-show ההנחיה אינה מסירה את האלמנט מה-DOM כאשר הביטוי מוערך ל-false. במקום זאת, הוא משתמש ב-CSS כדי להחליף את האלמנט לְהַצִיג רכוש בין אף אחד והערך המקורי שלו.

המשמעות היא שהאלמנט עדיין קיים ב-DOM אך אינו גלוי כאשר הביטוי הוא שקר.

הנה דוגמה:

<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<divv-if="showUsers">
<ul>
<לי>משתמש 1לי>
<לי>משתמש 2לי>
ul>
div>
<לַחְצָןv-on: לחץ="toggleShowUsers()">
 החלף משתמשים
לַחְצָן>
<h1v-show="showUsers">{{ הודעה }}h1>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים () {
 החזר {
 showUsers: נכון,
 הודעה: 'אלה המשתמשים באפליקציית Vue'
 }
 },
 שיטות: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
תַסרִיט>
גוּף>

בלוק הקוד שלמעלה משתמש ב- v-show הנחיה להציג הודעה המציינת, 'אלו הם המשתמשים באפליקציית Vue' בכל פעם שתלחץ על לחצן החלפת מצב.

בחירה בין v-if ל-v-show

כאשר מחליטים בין שימוש ב- v-if ו v-show הנחיות להצגה או הסתרה של אלמנטים ב-Vue.js באופן מותנה, יש כמה גורמים חשובים שיש לקחת בחשבון.

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

מצד שני, אם המצב צפוי להשתנות לעתים קרובות, עדיף להשתמש ב- v-show הנחיה, המשפרת את הביצועים. זה בגלל ש v-show משתמש ב-CSS כדי להסתיר או להציג את האלמנט על ידי החלפת מאפיין התצוגה של CSS בין none ל-block, מה שמשאיר את האלמנט תמיד מעובד ל-DOM.

עיבוד מותנה באפליקציית Vue שלך ​​קל

למדת לעבד תוכן באופן מותנה באפליקציות Vue עם הנחיות v-if ו-v-show. על ידי שימוש בהנחיות אלה, אתה יכול להציג במהירות תוכן בהתבסס על תנאים שונים, לתת לך יותר שליטה על המראה וההתנהגות של רכיבי ה-Vue שלך.