Uma introdução à renderização de listas no Vue

Uma das tarefas mais comuns no desenvolvimento da Web é a renderização de listas de dados. O Vue lida com isso com a ajuda do v-para diretiva. Você explorará o que é a diretiva v-for, como remover itens de uma lista e como renderizar listas com chaves.

O que é a diretiva v-for no Vue?

O v-para diretiva é uma das diretivas do Vue que permite renderizar listas com o mínimo de código JavaScript. O v-para diretiva funciona de forma semelhante ao for loop em JavaScript e pode iterar sobre arrays e objetos para renderizar itens em uma lista.

Para utilizar o v-para diretiva, forneça uma matriz que você deseja iterar no dados propriedade do Objeto de opções em Vue.

Por exemplo:

<modelo>
<ul>
<liv-para="nome em nomes">{{ nome }}li>
ul>
modelo>
<roteiro>
padrão de exportação {
 dados() {
 retornar {
 nomes: ['John', 'Doe', 'James'],
 };
 },
};
roteiro>

O bloco de código acima descreve um exemplo de um aplicativo Vue que utiliza o v-para diretiva para iterar sobre o nomes array que é fornecido no dados propriedade.

v-para tem um valor definido para uma expressão com duas partes: a variável de iteração (nome) e a nomes variedade v-para aponta para. A variável de iteração contém cada nome no nomes matriz e exibe o nome.

Vue cria um novo Modelo de objeto de documento (DOM) elemento para cada nome no nomes array e o renderiza na página da web.

Se o nomes mudanças de array (por exemplo, um novo nome é adicionado ou um antigo é removido), o Vue atualizará automaticamente o DOM virtual e renderizará novamente a lista para refletir os dados atualizados.

O Vue também oferece uma maneira de obter o índice de um elemento em uma lista.

<liv-para="(nome, índice) em nomes">{{ nome }} -- {{ índice }}li>

O código acima descreve a sintaxe para exibir o índice de cada nome no nomes variedade.

Você também pode utilizar o v-para diretiva para percorrer um intervalo de números:

<liv-para="num em 10">Vue é legalli>

O código acima renderizará uma lista com o texto Vue é legal dez vezes. O v-para A diretiva também pode percorrer um intervalo de números para exibir dados repetidamente ou executar uma operação. Neste caso, o num variável de iteração é usada para acessar o item atual na lista.

Como remover itens de uma lista no Vue

Você pode permitir que os usuários removam itens de listas em seu aplicativo da web. Esse recurso é útil ao criar aplicativos como uma lista de tarefas.

Você pode usar o emendar método JavaScript (essa é uma das formas de removendo itens de arrays) para remover um item de uma lista no Vue.

array.splice (startIndex, numToRemove, newElements)

O método splice pode adicionar ou remover itens de uma matriz. O método splice recebe os parâmetros na seguinte ordem:

1. O startIndex O parâmetro define o índice no qual começar a modificar a matriz.
2. numToRemove indica o número de itens que você deseja remover da matriz.
3. finalmente, o novosElementos parâmetro, que você pode usar para adicionar elementos à matriz. Se nenhum elemento for especificado, emenda() apenas removerá elementos da matriz.

Para usar o método splice para remover um item de uma lista no Vue, você precisa conhecer o índice desse item. Uma maneira de conseguir isso é passar o índice como um argumento para um método que manipula a remoção do item.

Por exemplo, você pode adicionar um botão ao lado de cada nome na matriz que aciona um método para remover o item quando um usuário clica nele:

<modelo>
<ul>
<liv-para="(nome, índice) em nomes">
 {{ nome }} -- {{ índice }}
<botão @clique="removeItem (índice)">Removerbotão>
li>
ul>
modelo>

O índice parâmetro nos dá acesso ao índice de cada nome na matriz, que este programa passa como um argumento para o remover item método. O remover item método pode então usar o emendar método para remover um nome de nomes variedade:

<roteiro>
padrão de exportação {
 dados() {
 retornar {
 nomes: ['John', 'Doe', 'James'],
 };
 },
 métodos: {
 removeItem (índice) {
 this.names.splice (índice, 1);
 }
}
};
roteiro>

O script acima usa o emendar para remover um nome da lista de nomes renderizados. Isso atualizará automaticamente a lista na interface do usuário para refletir a matriz atualizada.

Como renderizar listas com chaves no Vue

O chave attribute é um atributo exclusivo que o Vue usa para rastrear a identidade de cada item na lista. Quando um item na lista muda, com a ajuda do chave O atributo Vue pode atualizar rapidamente o DOM sem renderizar novamente a lista inteira.

Vamos dar uma olhada em um exemplo de renderização de uma lista com chaves no Vue:

<modelo>
<div>
<ul>
<liv-para="nome em nomes":chave="nome.id">
 {{ nome nome }}
<botão @clique="removeItem (nome.id)">Removerbotão>
li>
ul>
div>
modelo>
<roteiro>
padrão de exportação {
 dados() {
 retornar {
 nomes: [
 { id: 1, nome: "João"},
 { id: 2, nome: "Corça"},
 { id: 3, nome: "James"},
 ],
 };
 },
 métodos: {
 removeItem (chave) {
 this.names.splice (chave - 1, 1);
 },
 },
};
roteiro>

Neste exemplo, você tem uma lista de itens com eu ia propriedades. O bloco de código usa o chave atributo com o v-para diretiva para rastrear a identidade de cada item na lista. Isso permite que o Vue atualize eficientemente o DOM quando a lista muda.

Se você removesse um item da lista, o Vue atualizaria o DOM sem ter que renderizar novamente a lista inteira. Isso ocorre porque o Vue mantém a identidade de cada item na lista e pode atualizar apenas os itens que foram alterados.

O chave atributo deve ser um identificador exclusivo para cada item na lista. Isso pode ser um eu ia propriedade ou qualquer outro identificador exclusivo que possa ser usado para rastrear o item.

Usando o chave atributo com o v-para A diretiva ajuda a evitar problemas de renderização. Por exemplo, ao remover os nomes, o Vue usa o chave atributo para manter a ordem dos itens na lista.

Diretivas Vue são essenciais

Aqui, você abordou os fundamentos da renderização de listas no Vue, incluindo a remoção de itens de listas e a renderização de listas com chaves. Você pode criar interfaces responsivas que lidam com listas de dados complexas ao entender esses conceitos.

O Vue possui uma infinidade de diretivas para diferentes propósitos, incluindo renderização condicional, vinculação de eventos e vinculação de dados. Compreender essas diretivas pode ajudá-lo a criar aplicativos da Web interativos eficientes.