Un'introduzione al rendering delle liste in Vue

Una delle attività più comuni nello sviluppo web è il rendering degli elenchi di dati. Vue gestisce questo con l'aiuto di v-per direttiva. Esplorerai cos'è la direttiva v-for, come rimuovere gli elementi da un elenco e come rendere gli elenchi con le chiavi.

Qual è la direttiva v-for in Vue?

IL v-per La direttiva è una delle direttive di Vue che consente di eseguire il rendering degli elenchi con un codice JavaScript minimo. IL v-per La direttiva funziona in modo simile alla direttiva for ciclo in JavaScript e può eseguire iterazioni su matrici e oggetti per eseguire il rendering degli elementi in un elenco.

Per utilizzare il v-per direttiva, fornire un array su cui eseguire l'iterazione nel file dati proprietà del Oggetto opzioni in Vue.

Per esempio:

<modello>
<Ul>
<liv-per="nome nei nomi">{{ nome }}li>
Ul>
modello>
<copione>
esportazione predefinita {
 dati() {
 ritorno {
 nomi: ['John', 'Doe', 'James'],
 };
 },
};
copione>

Il blocco di codice sopra raffigura un esempio di un'app Vue che utilizza il v-per direttiva per iterare sul nomi matrice fornita in dati proprietà.

v-per ha un valore impostato su un'espressione con due parti: la variabile di iterazione (nome) e il nomi vettore v-per punta a. La variabile di iterazione contiene ciascuno nome nel nomi matrice e visualizza il nome.

Vue crea un nuovo Document Object Model (DOM) elemento per ciascuno nome nel nomi array e lo rende sulla pagina web.

Se la nomi modifiche all'array (ad esempio, viene aggiunto un nuovo nome o ne viene rimosso uno vecchio), Vue aggiornerà automaticamente il DOM virtuale e renderà nuovamente l'elenco per riflettere i dati aggiornati.

Vue offre anche un modo per ottenere l'indice di un elemento in un elenco.

<liv-per="(nome, indice) nei nomi">{{ nome }} -- {{ indice }}li>

Il codice sopra descrive la sintassi per la visualizzazione dell'indice di ciascuno nome nel nomi vettore.

Puoi anche utilizzare il v-per direttiva per scorrere un intervallo di numeri:

<liv-per="num su 10">Vue è belloli>

Il codice precedente renderà un elenco con il testo Vue è bello dieci volte. IL v-per direttiva può anche scorrere un intervallo di numeri per visualizzare ripetutamente i dati o eseguire un'operazione. In questo caso, il num variabile di iterazione viene utilizzata per accedere all'elemento corrente nell'elenco.

Come rimuovere elementi da un elenco in Vue

Puoi consentire agli utenti di rimuovere elementi dagli elenchi nella tua app web. Questa funzione è utile quando si creano app come un elenco di cose da fare.

Puoi usare il giunzione Metodo JavaScript (che è uno dei modi di rimozione di elementi dagli array) per rimuovere un elemento da un elenco in Vue.

array.splice (startIndex, numToRemove, newElements)

Il metodo di giunzione può aggiungere o rimuovere elementi da un array. Il metodo di giunzione accetta i parametri nel seguente ordine:

1. IL inizioIndice Il parametro imposta l'indice in corrispondenza del quale iniziare a modificare l'array.
2. numToRemove indica il numero di elementi che si desidera rimuovere dall'array.
3. Infine il newElements parametro, che puoi utilizzare per aggiungere elementi all'array. Se non vengono specificati elementi, giunzione() rimuoverà solo elementi dall'array.

Per utilizzare il metodo di giunzione per rimuovere un elemento da un elenco in Vue, è necessario conoscere l'indice di tale elemento. Un modo per raggiungere questo obiettivo è passare il indice come argomento di un metodo che gestisce la rimozione dell'elemento.

Ad esempio, puoi aggiungere un pulsante accanto a ciascun nome nell'array che attiva un metodo per rimuovere l'elemento quando un utente fa clic su di esso:

<modello>
<Ul>
<liv-per="(nome, indice) nei nomi">
 {{ nome }} -- {{ indice }}
<pulsante @clic="rimuoviItem (indice)">Rimuoverepulsante>
li>
Ul>
modello>

IL indice parametro ci dà accesso all'indice di ciascuno nome nell'array, che questo programma passa come argomento a Rimuovi oggetto metodo. IL Rimuovi oggetto metodo può quindi utilizzare il giunzione metodo per rimuovere a nome dal nomi vettore:

<copione>
esportazione predefinita {
 dati() {
 ritorno {
 nomi: ['John', 'Doe', 'James'],
 };
 },
 metodi: {
 removeItem (indice) {
 this.names.splice (indice, 1);
 }
}
};
copione>

Lo script sopra utilizza il file giunzione metodo per rimuovere un nome dall'elenco dei nomi visualizzati. Questo aggiornerà automaticamente l'elenco nell'interfaccia utente per riflettere l'array aggiornato.

Come rendere le liste con le chiavi in ​​Vue

IL chiave L'attributo è un attributo univoco che Vue utilizza per tracciare l'identità di ciascun elemento nell'elenco. Quando un elemento nell'elenco cambia, con l'aiuto del file chiave L'attributo Vue può aggiornare rapidamente il DOM senza eseguire nuovamente il rendering dell'intero elenco.

Diamo un'occhiata a un esempio di rendering di un elenco con chiavi in ​​Vue:

<modello>
<div>
<Ul>
<liv-per="nome nei nomi":chiave="nome.id">
 {{ nome.nome }}
<pulsante @clic="rimuoviItem (nome.id)">Rimuoverepulsante>
li>
Ul>
div>
modello>
<copione>
esportazione predefinita {
 dati() {
 ritorno {
 nomi: [
 { id: 1, nome: "Giovanni"},
 { id: 2, nome: "Doe"},
 { id: 3, nome: "James"},
 ],
 };
 },
 metodi: {
 removeItem (chiave) {
 this.names.splice (chiave - 1, 1);
 },
 },
};
copione>

In questo esempio, hai un elenco di elementi con unique id proprietà. Il blocco di codice usa il chiave attributo con il v-per direttiva per tenere traccia dell'identità di ciascun elemento nell'elenco. Ciò consente a Vue di aggiornare in modo efficiente il DOM quando l'elenco cambia.

Se dovessi rimuovere un elemento dall'elenco, Vue aggiornerebbe il DOM senza dover eseguire nuovamente il rendering dell'intero elenco. Questo perché Vue conserva l'identità di ciascun elemento nell'elenco e può aggiornare solo gli elementi che sono stati modificati.

IL chiave L'attributo dovrebbe essere un identificatore univoco per ogni elemento nell'elenco. Questo può essere un id proprietà o qualsiasi altro identificatore univoco che può essere utilizzato per tracciare l'elemento.

Usando il chiave attributo con il v-per direttiva aiuta a evitare problemi di rendering. Ad esempio, quando si rimuovono i nomi, Vue utilizza il file chiave attributo per mantenere l'ordine degli elementi nell'elenco.

Le direttive Vue sono essenziali

Qui, hai trattato le basi del rendering degli elenchi in Vue, inclusa la rimozione di elementi dagli elenchi e il rendering degli elenchi con le chiavi. È possibile creare interfacce reattive che gestiscono elenchi di dati complessi comprendendo questi concetti.

Vue ha una pletora di direttive per scopi diversi, tra cui il rendering condizionale, l'associazione di eventi e l'associazione di dati. La comprensione di queste direttive può aiutarti a creare app Web interattive efficienti.