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, uma vez que remover itens de uma lista e uma vez que 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 A diretiva funciona de maneira semelhante ao loop for 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 Options em Vue.
Por exemplo:
<template>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
</template><script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
};
</script>
O conjunto de código supra 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 sentença 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 elemento Document Object Model (DOM) 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 idoso é removido), o Vue atualizará involuntariamente 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.
<li v-for="(name,índice) in names">{{ name }} -- {{ índice }}</li>
O código supra 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 pausa de números:
<li v-for="num in 10">Vue is Nice</li>
O código supra renderizará uma lista com o texto Vue é lítico dez vezes. O v-para A diretiva também pode percorrer um pausa 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.
Porquê 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 produzir aplicativos uma vez que uma lista de tarefas.
Você pode usar o emendar Método JavaScript (que é uma das formas de remover itens de arrays) para remover um item de uma lista no Vue.
array.splice(startIndex, numToRemove, newElements)
O método splice pode aditar ou remover itens de uma matriz. O método splice recebe os parâmetros na seguinte ordem:
- O startIndex O parâmetro define o índice no qual estrear a modificar a matriz.
- numToRemove indica o número de itens que você deseja remover da matriz.
- finalmente, o novosElementos parâmetro, que você pode usar para aditar elementos à matriz. Se nenhum elemento for especificado, emenda() somente removerá elementos da matriz.
Para usar o método splice para remover um item de uma lista no Vue, você precisa saber o índice desse item. Uma maneira de conseguir isso é passar o índice uma vez que um argumento para um método que manipula a remoção do item.
Por exemplo, você pode aditar 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:
<template>
<ul>
<li v-for="(name,índice) in names">
{{ name }} -- {{ índice }}
<button @click="removeItem(índice)">Remove</button>
</li>
</ul>
</template>
O índice parâmetro nos dá entrada ao índice de cada nome na matriz, que nascente programa passa uma vez que um argumento para o remover item método. O remover item método pode portanto usar o emendar método para remover um nome de nomes variedade:
<script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
methods: {
removeItem(índice) {
this.names.splice(índice, 1);
}
}
};
</script>
O script supra usa o emendar para remover um nome da lista de nomes renderizados. Isso atualizará involuntariamente a lista na interface do usuário para refletir a matriz atualizada.
Porquê renderizar listas com chaves no Vue
O chave attribute é um atributo restrito 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:
<template>
<div>
<ul>
<li v-for="name in names" :key="name.id">
{{ name.name }}
<button @click="removeItem(name.id)">Remove</button>
</li>
</ul>
</div>
</template><script>
export default {
data() {
return {
names: [
{ id: 1, name: "John"},
{ id: 2, name: "Doe"},
{ id: 3, name: "James"},
],
};
},
methods: {
removeItem(key) {
this.names.splice(key - 1, 1);
},
},
};
</script>
Neste exemplo, você tem uma lista de itens com eu ia propriedades. O conjunto 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 somente os itens que foram alterados.
O chave atributo deve ser um identificador restrito para cada item na lista. Isso pode ser um eu ia propriedade ou qualquer outro identificador restrito 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
Cá, 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 produzir 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 produzir aplicativos da Web interativos eficientes.
