Wprowadzenie do renderowania list w Vue

Jednym z najczęstszych zadań w tworzeniu stron internetowych jest renderowanie list danych. Vue radzi sobie z tym za pomocą v-za dyrektywa. Dowiesz się, czym jest dyrektywa v-for, jak usuwać elementy z listy i jak renderować listy za pomocą kluczy.

Czym jest dyrektywa v-for w Vue?

The v-za dyrektywa jest jedną z dyrektyw Vue, która umożliwia renderowanie list przy minimalnym kodzie JavaScript. The v-za dyrektywa działa podobnie do for pętla w JavaScript i może iterować po tablicach i obiektach, aby renderować elementy na liście.

Aby wykorzystać v-za dyrektywa, podaj tablicę, którą chcesz iterować w dane własność r Obiekt opcji w Vue.

Na przykład:

<szablon>
<ul>
<liv-za=„imię w imionach”>{{ nazwa }}li>
ul>
szablon>
<scenariusz>
wyeksportuj domyślne {
 dane() {
 powrót {
 imiona: ['John', 'Doe', 'James'],
 };
 },
};
scenariusz>

Powyższy blok kodu przedstawia przykład aplikacji Vue, która wykorzystuje v-za dyrektywa do iteracji po nazwy tablica, która jest dostarczona w dane nieruchomość.

v-za ma wartość ustawioną na wyrażenie składające się z dwóch części: zmienną iteracyjną (nazwa) i nazwy szyk v-za punkty dla. Zmienna iteracyjna przechowuje każdy nazwa w nazwy tablica i wyświetla nazwa.

Vue tworzy nowy Obiektowy model dokumentu (DOM) element dla każdego nazwa w nazwy array i renderuje go na stronie internetowej.

jeśli nazwy zmiany w tablicy (na przykład dodano nową nazwę lub usunięto starą), Vue automatycznie zaktualizuje wirtualny DOM i ponownie wyrenderuje listę, aby odzwierciedlić zaktualizowane dane.

Vue oferuje również sposób na uzyskanie indeksu elementu na liście.

<liv-za=„(nazwa, indeks) w nazwach”>{{ nazwa }} -- {{ indeks }}li>

Powyższy kod przedstawia składnię wyświetlania indeksu każdego z nich nazwa w nazwy szyk.

Możesz także skorzystać z tzw v-za dyrektywa, aby przejść przez zakres liczb:

<liv-za=„liczba w 10”>Vue jest fajnyli>

Powyższy kod wyrenderuje listę z tekstem Vue jest fajny dziesięć razy. The v-za Dyrektywa może również przechodzić przez zakres liczb w celu wielokrotnego wyświetlania danych lub wykonywania operacji. W tym przypadku liczba zmienna iteracyjna służy do uzyskiwania dostępu do bieżącego elementu na liście.

Jak usunąć elementy z listy w Vue

Możesz zezwolić użytkownikom na usuwanie elementów z list w Twojej aplikacji internetowej. Ta funkcja jest przydatna podczas tworzenia aplikacji, takich jak lista rzeczy do zrobienia.

Możesz użyć splatać Metoda JavaScript (jest to jeden ze sposobów usuwanie elementów z tablic), aby usunąć element z listy w Vue.

array.splice (startIndex, numToRemove, newElements)

Metoda splice może dodawać lub usuwać elementy z tablicy. Metoda łączenia przyjmuje parametry w następującej kolejności:

1. The startIndeks parametr ustawia indeks, od którego należy rozpocząć modyfikowanie tablicy.
2. liczba do usunięcia wskazuje liczbę elementów, które chcesz usunąć z tablicy.
3. Wreszcie, noweElementy parametr, którego można użyć do dodania elementów do tablicy. Jeśli nie określono żadnych elementów, splatać() usunie tylko elementy z tablicy.

Aby użyć metody splice do usunięcia elementu z listy w Vue, musisz znać indeks tego elementu. Jednym ze sposobów osiągnięcia tego celu jest przekazanie indeks jako argument do metody obsługującej usuwanie elementu.

Na przykład możesz dodać przycisk obok każdej nazwy w tablicy, który uruchamia metodę usuwania elementu, gdy użytkownik go kliknie:

<szablon>
<ul>
<liv-za=„(nazwa, indeks) w nazwach”>
 {{ nazwa }} -- {{ indeks }}
<przycisk @Kliknij=„usuń element (indeks)”>Usunąćprzycisk>
li>
ul>
szablon>

The indeks parametr daje nam dostęp do indeksu każdego z nich nazwa w tablicy, którą ten program przekazuje jako argument funkcji Usuń przedmiot metoda. The Usuń przedmiot metoda może następnie użyć splatać sposób na usunięcie A nazwa od nazwy szyk:

<scenariusz>
wyeksportuj domyślne {
 dane() {
 powrót {
 imiona: ['John', 'Doe', 'James'],
 };
 },
 metody: {
 usuń element (indeks) {
 this.names.splice (indeks, 1);
 }
}
};
scenariusz>

Powyższy skrypt używa splatać metoda usunięcia jednej nazwy z listy renderowanych nazw. Spowoduje to automatyczną aktualizację listy w interfejsie użytkownika w celu odzwierciedlenia zaktualizowanej tablicy.

Jak renderować listy za pomocą kluczy w Vue

The klucz atrybut to unikalny atrybut, którego Vue używa do śledzenia tożsamości każdego elementu na liście. Gdy pozycja na liście ulegnie zmianie, za pomocą klucz atrybut Vue może szybko zaktualizować DOM bez ponownego renderowania całej listy.

Rzućmy okiem na przykład renderowania listy z kluczami w Vue:

<szablon>
<dz>
<ul>
<liv-za=„imię w imionach”:klucz="nazwa.id">
 {{ Nazwa nazwa }}
<przycisk @Kliknij="removeItem (nazwa.id)">Usunąćprzycisk>
li>
ul>
dz>
szablon>
<scenariusz>
wyeksportuj domyślne {
 dane() {
 powrót {
 nazwy: [
 { id: 1, imię: "Jan"},
 { id: 2, imię: "Kowalski"},
 { id: 3, imię: "James"},
 ],
 };
 },
 metody: {
 usuń element (klucz) {
 this.names.splice (klucz - 1, 1);
 },
 },
};
scenariusz>

W tym przykładzie masz listę elementów z unikalnymi ID nieruchomości. Blok kodu wykorzystuje klucz atrybut z v-za dyrektywę do śledzenia tożsamości każdego elementu na liście. Dzięki temu Vue może wydajnie aktualizować DOM, gdy zmienia się lista.

Jeśli usuniesz element z listy, Vue zaktualizuje DOM bez konieczności ponownego renderowania całej listy. Dzieje się tak, ponieważ Vue przechowuje tożsamość każdego elementu na liście i może aktualizować tylko te elementy, które uległy zmianie.

The klucz atrybut powinien być unikalnym identyfikatorem dla każdego elementu na liście. To może być ID właściwość lub inny unikalny identyfikator, który może być wykorzystany do śledzenia przedmiotu.

Używając klucz atrybut z v-za pomaga uniknąć problemów z renderowaniem. Na przykład, usuwając nazwy, Vue używa klucz atrybut, aby zachować kolejność elementów na liście.

Dyrektywy Vue są niezbędne

Tutaj omówiłeś podstawy renderowania list w Vue, w tym usuwanie elementów z list i renderowanie list za pomocą kluczy. Dzięki zrozumieniu tych koncepcji można tworzyć responsywne interfejsy obsługujące złożone listy danych.

Vue ma mnóstwo dyrektyw do różnych celów, w tym renderowanie warunkowe, wiązanie zdarzeń i wiązanie danych. Zrozumienie tych dyrektyw może pomóc w tworzeniu wydajnych interaktywnych aplikacji internetowych.