מבוא לעיבוד רשימות ב-Vue

אחת המשימות הנפוצות ביותר בפיתוח אתרים היא עיבוד רשימות נתונים. Vue מטפל בזה בעזרת ה v-for הוֹרָאָה. תוכלו לחקור מהי הוראת v-for, כיצד להסיר פריטים מרשימה וכיצד לעבד רשימות עם מפתחות.

מהי ההנחיה v-for ב-Vue?

ה v-for directive היא אחת מההנחיות של Vue המאפשרת לך להציג רשימות עם קוד JavaScript מינימלי. ה v-for ההנחיה פועלת בדומה ל-for לולאה ב-JavaScript ויכול לחזור על מערכים ואובייקטים כדי להציג פריטים ברשימה.

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

לדוגמה:

<תבנית>
<ul>
<ליv-for="שם בשמות">{{ שם }}לי>
ul>
תבנית>
<תַסרִיט>
ייצוא ברירת מחדל {
 נתונים() {
 החזר {
 שמות: ['ג'ון', 'איילה', 'ג'יימס'],
 };
 },
};
תַסרִיט>

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

v-for יש ערך שהוגדר לביטוי עם שני חלקים: משתנה האיטרציה (שֵׁם) וה שמות מַעֲרָך v-for נקודות ל. משתנה האיטרציה מחזיק כל אחד שֵׁם בתוך ה שמות מערך ומציג את שֵׁם.

Vue יוצר חדש מודל אובייקט מסמך (DOM) אלמנט עבור כל אחד שֵׁם בתוך ה שמות מערך ומציג אותו בדף האינטרנט.

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

Vue מציעה גם דרך לקבל את האינדקס של אלמנט ברשימה.

<ליv-for="(שם, אינדקס) בשמות">{{ שם }} -- {{ אינדקס }}לי>

הקוד למעלה מתאר את התחביר להצגת האינדקס של כל אחד מהם שֵׁם בתוך ה שמות מַעֲרָך.

אתה יכול גם להשתמש ב v-for הנחיה ללולאה בטווח של מספרים:

<ליv-for="מספר ב-10">Vue זה נחמדלי>

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

כיצד להסיר פריטים מרשימה ב-Vue

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

אתה יכול להשתמש ב אִחוּי שיטת JavaScript (זו אחת הדרכים של הסרת פריטים ממערכים) כדי להסיר פריט מרשימה ב-Vue.

array.splice (startIndex, numToRemove, newElements)

שיטת splice יכולה להוסיף או להסיר פריטים ממערך. שיטת החבור לוקחת את הפרמטרים בסדר הבא:

1. ה startIndex פרמטר מגדיר את האינדקס שבו מתחילים לשנות את המערך.
2. numToRemove מציין את מספר הפריטים שברצונך להסיר מהמערך.
3. סוף - סוף, ה newElements פרמטר, שבו אתה יכול להשתמש כדי להוסיף אלמנטים למערך. אם לא צוינו אלמנטים, אִחוּי() יסיר רק אלמנטים מהמערך.

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

לדוגמה, אתה יכול להוסיף לחצן ליד כל שם במערך שמפעיל שיטה להסרת הפריט כאשר משתמש לוחץ עליו:

<תבנית>
<ul>
<ליv-for="(שם, אינדקס) בשמות">
 {{ שם }} -- {{ אינדקס }}
<לַחְצָן @נְקִישָׁה="removeItem (אינדקס)">לְהַסִירלַחְצָן>
לי>
ul>
תבנית>

ה אינדקס פרמטר נותן לנו גישה לאינדקס של כל אחד שֵׁם במערך, שתוכנית זו מעבירה כטיעון ל- הסר פריט שיטה. ה הסר פריט השיטה יכולה אז להשתמש ב- אִחוּי שיטה להסרת א שֵׁם מ ה שמות מַעֲרָך:

<תַסרִיט>
ייצוא ברירת מחדל {
 נתונים() {
 החזר {
 שמות: ['ג'ון', 'איילה', 'ג'יימס'],
 };
 },
 שיטות: {
 removeItem (אינדקס) {
 this.names.splice (אינדקס, 1);
 }
}
};
תַסרִיט>

הסקריפט לעיל משתמש ב- אִחוּי שיטה להסרת שם אחד מרשימת השמות המעובדים. פעולה זו תעדכן אוטומטית את הרשימה בממשק המשתמש כדי לשקף את המערך המעודכן.

כיצד להציג רשימות עם מפתחות ב-Vue

ה מַפְתֵחַ תכונה היא תכונה ייחודית שבה משתמש Vue כדי לעקוב אחר הזהות של כל פריט ברשימה. כאשר פריט ברשימה משתנה, בעזרת ה- מַפְתֵחַ תכונה Vue יכולה לעדכן במהירות את ה-DOM מבלי לעבד מחדש את הרשימה כולה.

בואו נסתכל על דוגמה לעיבוד רשימה עם מפתחות ב-Vue:

<תבנית>
<div>
<ul>
<ליv-for="שם בשמות":מַפְתֵחַ="name.id">
 {{ שם שם }}
<לַחְצָן @נְקִישָׁה="removeItem (name.id)">לְהַסִירלַחְצָן>
לי>
ul>
div>
תבנית>
<תַסרִיט>
ייצוא ברירת מחדל {
 נתונים() {
 החזר {
 שמות: [
 { id: 1, name: "John"},
 { id: 2, name: "איילה"},
 { id: 3, name: "James"},
 ],
 };
 },
 שיטות: {
 removeItem (key) {
 this.names.splice (מפתח - 1, 1);
 },
 },
};
תַסרִיט>

בדוגמה זו, יש לך רשימה של פריטים עם ייחודי תְעוּדַת זֶהוּת נכסים. בלוק הקוד משתמש ב- מַפְתֵחַ תכונה עם ה v-for הנחיה לעקוב אחר הזהות של כל פריט ברשימה. זה מאפשר ל-Vue לעדכן ביעילות את ה-DOM כאשר הרשימה משתנה.

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

ה מַפְתֵחַ המאפיין צריך להיות מזהה ייחודי עבור כל פריט ברשימה. זה יכול להיות תְעוּדַת זֶהוּת נכס או כל מזהה ייחודי אחר שניתן להשתמש בו כדי לעקוב אחר הפריט.

משתמש ב מַפְתֵחַ תכונה עם ה v-for ההנחיה עוזרת להימנע מבעיות עיבוד. לדוגמה, בעת הסרת השמות, Vue משתמש ב- מַפְתֵחַ תכונה כדי לשמור על סדר הפריטים ברשימה.

הנחיות Vue הן חיוניות

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

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