Въведение в изобразяването на списъци във Vue

Една от най-често срещаните задачи в уеб разработката е изобразяването на списъци с данни. Vue се справя с това с помощта на v-за директива. Ще проучите какво представлява директивата v-for, как да премахнете елементи от списък и как да изобразите списъци с ключове.

Какво представлява директивата v-for във Vue?

The v-за директива е една от директивите на Vue, която ви позволява да изобразявате списъци с минимален JavaScript код. The v-за директивата работи подобно на for цикъл в JavaScript и може да обхожда масиви и обекти, за да рендира елементи в списък.

За да използвате v-за директива, осигурете масив, който искате да повторите в данни собственост на Обект с опции във Vue.

Например:

<шаблон>
<ул>
<лиv-за="име в имената">{{ име }}ли>
ул>
шаблон>
<сценарий>
експортиране по подразбиране {
 данни() {
 връщане {
 имена: ['Джон', 'Доу', 'Джеймс'],
 };
 },
};
сценарий>

Кодовият блок по-горе изобразява пример за приложение Vue, което използва v-за директива за повторение на имена масив, който е предоставен в данни Имот.

v-за има стойност, зададена на израз с две части: итерационната променлива (име) и имена масив v-за сочи към. Итерационната променлива съдържа всеки име в имена масив и показва име.

Vue създава нов Обектен модел на документ (DOM) елемент за всеки име в имена масив и го изобразява на уеб страницата.

Ако имена промени в масива (например, добавя се ново име или се премахва старо), Vue автоматично ще актуализира виртуалния DOM и ще изобрази отново списъка, за да отрази актуализираните данни.

Vue също предлага начин за получаване на индекса на елемент в списък.

<лиv-за="(име, индекс) в имена">{{ име }} -- {{ индекс }}ли>

Кодът по-горе изобразява синтаксиса за показване на индекса на всеки име в имена масив.

Можете също така да използвате v-за директива за преминаване през диапазон от числа:

<лиv-за="брой в 10">Vue е хубаволи>

Горният код ще изобрази списък с текста Vue е хубаво десет пъти. The v-за директивата може също така да премине през диапазон от числа, за да покаже многократно данни или да извърши операция. В този случай, бр итерационната променлива се използва за достъп до текущия елемент в списъка.

Как да премахнете елементи от списък във Vue

Можете да разрешите на потребителите да премахват елементи от списъци във вашето уеб приложение. Тази функция е полезна при създаване на приложения като списък със задачи.

Можете да използвате снаждане JavaScript метод (това е един от начините за премахване на елементи от масиви), за да премахнете елемент от списък във Vue.

array.splice (startIndex, numToRemove, newElements)

Методът на снаждане може да добавя или премахва елементи от масив. Методът на снаждане приема параметрите в следния ред:

1. The startIndex параметърът задава индекса, от който да започне модифицирането на масива.
2. numToRemove показва броя на елементите, които искате да премахнете от масива.
3. И накрая, на новиЕлементи параметър, който можете да използвате за добавяне на елементи към масива. Ако не са посочени елементи, снаждане() ще премахне само елементи от масива.

За да използвате метода на снаждане за премахване на елемент от списък във Vue, трябва да знаете индекса на този елемент. Един от начините да постигнете това е да преминете индекс като аргумент на метод, който обработва премахването на елемента.

Например, можете да добавите бутон до всяко име в масива, който задейства метод за премахване на елемента, когато потребител кликне върху него:

<шаблон>
<ул>
<лиv-за="(име, индекс) в имена">
 {{ име }} -- {{ индекс }}
<бутон @щракнете="премахване на елемент (индекс)">Премахванебутон>
ли>
ул>
шаблон>

The индекс ни дава достъп до индекса на всеки име в масива, който тази програма предава като аргумент на Премахни артикул метод. The Премахни артикул методът може след това да използва снаждане метод за премахване на a име от имена масив:

<сценарий>
експортиране по подразбиране {
 данни() {
 връщане {
 имена: ['Джон', 'Доу', 'Джеймс'],
 };
 },
 методи: {
 removeItem (индекс) {
 this.names.splice (индекс, 1);
 }
}
};
сценарий>

Горният скрипт използва снаждане метод за премахване на едно име от списъка с изобразени имена. Това автоматично ще актуализира списъка в потребителския интерфейс, за да отрази актуализирания масив.

Как да визуализирате списъци с ключове във Vue

The ключ е уникален атрибут, който Vue използва за проследяване на идентичността на всеки елемент в списъка. Когато даден елемент в списъка се промени, с помощта на ключ атрибут Vue може бързо да актуализира DOM без повторно изобразяване на целия списък.

Нека да разгледаме пример за изобразяване на списък с ключове във Vue:

<шаблон>
<див>
<ул>
<лиv-за="име в имената": ключ="name.id">
 {{ име.име }}
<бутон @щракнете="премахване на елемент (име.id)">Премахванебутон>
ли>
ул>
див>
шаблон>
<сценарий>
експортиране по подразбиране {
 данни() {
 връщане {
 имена: [
 { id: 1, име: "Джон"},
 { id: 2, име: "Сърна"},
 { id: 3, име: "Джеймс"},
 ],
 };
 },
 методи: {
 removeItem (ключ) {
 this.names.splice (ключ - 1, 1);
 },
 },
};
сценарий>

В този пример имате списък с елементи с уникален документ за самоличност Имоти. Кодовият блок използва ключ атрибут с v-за директива за проследяване на идентичността на всеки елемент в списъка. Това позволява на Vue ефективно да актуализира DOM, когато списъкът се промени.

Ако трябваше да премахнете елемент от списъка, Vue ще актуализира DOM, без да се налага да рендира отново целия списък. Това е така, защото Vue съхранява самоличността на всеки елемент в списъка и може да актуализира само елементите, които са променени.

The ключ трябва да бъде уникален идентификатор за всеки елемент в списъка. Това може да бъде документ за самоличност свойство или всеки друг уникален идентификатор, който може да се използва за проследяване на елемента.

Използвайки ключ атрибут с v-за директива помага да се избегнат проблеми с изобразяването. Например, когато премахва имената, Vue използва ключ атрибут за поддържане на реда на елементите в списъка.

Директивите на Vue са от съществено значение

Тук разгледахте основите на изобразяването на списъци във Vue, включително премахване на елементи от списъци и изобразяване на списъци с ключове. Можете да създадете отзивчиви интерфейси, които обработват сложни списъци с данни, като разберете тези концепции.

Vue има множество директиви за различни цели, включително условно изобразяване, обвързване на събития и обвързване на данни. Разбирането на тези директиви може да ви помогне да създавате ефективни интерактивни уеб приложения.