Como usar melhor o loop VUE v-for

Adquira o hábito de escrever juntos! Este é o 8º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .

1. Introdução

vueNão é desconhecido para desenvolvedores familiares v-for, porque deve ser usado no processo de desenvolvimento. Costumamos usá-lo para percorrer arrays ou objetos e exibir listas. Hoje, vamos listar vários usos e sugestões comuns, para que possamos usá-lo melhor.

2. Instruções de uso

2.1 v-forDefina :keyvalor da chave para cada

• Usar valores em loops :keytambém é o método oficialmente recomendado.

• Na ausência de settings :key, quando alteramos dinamicamente o array, pode haver situações fora de ordem. No código a seguir, se você removê-lo :key="student.id", selecione um aluno e clique para adicionar um aluno, haverá um distúrbio.

• :keyCada elemento terá uma referência de chave exclusiva e será mais conveniente para nós manipularmos os dados.

<template>
  <ul>
    <li v-for="student in students" :key="student.id"><input type="checkbox">{{ student.id }}：{{ student.name }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>

<script setup>
import {reactive} from "vue";

const students = reactive([
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 3, name: '王五'},
])
const addStudent = () => {
  const _id = students.length + 1
  students.unshift({id: _id, name: '学生' + _id})
}
</script>
复制代码

2.2 Usando indexíndices em loops

Além de dar a definição do loop :key, também podemos acessar o índice no loop, o índice será um número ordinal a partir de 0.

<template>
  <ul>
    <li v-for="(student, index) in students" :key="student.id"><input type="checkbox">#{{index}}.{{ student.id }}：{{ student.name }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>
复制代码

2.3 Usando filtermétodos para filtrar elementos

Às vezes precisamos filtrar e filtrar os dados para exibição, ou conforme o exemplo acima, fazer alterações e adicionar o campo de pontuação do aluno.

Precisamos filtrar as notas de aprovação dos alunos, então podemos fazer isso através da filtragem de loop filter. De fato, v-ifjulgar a pontuação também pode obter o efeito, mas não é recomendável lidar com isso, pois os dados também são renderizados em um loop e o desempenho não pode ser maximizado.

<template>
  <ul>
    及格分数：<input type="number" v-model="minScore">
    <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}.名称：{{ student.name }}；分数：{{ student.score }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>

<script setup>
import {reactive, ref} from "vue";

const minScore = ref(60)
const students = reactive([
  {id: 1, name: '张三', score: 59},
  {id: 2, name: '李四', score: 80},
  {id: 3, name: '王五', score: 90},
])
const filterItems = (items) => {
  return items.filter((item) => {
    return item.score >= minScore.value
  })
}
const addStudent = () => {
  const _id = students.length + 1
  const _score = Math.round(Math.random() * 100 + 30)
  students.unshift({id: _id, name: '学生' + _id, score: _score})
}
</script>

复制代码

2.4 Não v-foruse emv-if

Por favor, não tente v-forusá -lo em v-if, se precisar filtrar os dados, use o filtermétodo. Se você realmente precisa julgar se deseja exibir o conteúdo do módulo, é recomendável fazer um julgamento v-ifna camada superior .v-if

Por exemplo, se o exemplo acima for alterado, é necessário julgar que as informações de conteúdo só serão exibidas quando for professor. isTeacherAdicionado a ulmédio, não limédio.

<template>
  <ul v-if="isTeacher">
    及格分数：<input type="number" v-model="minScore">
    <li v-for="student in filterItems(students)" :key="student.id"><input type="checkbox">{{ student.id }}.名称：{{ student.name }}；分数：{{ student.score }}</li>
    <button @click="addStudent">添加学生</button>
  </ul>
</template>
复制代码

Resumir

Neste artigo, os casos de uso apresentados brevemente v-forpodem ter sido usados ​​ou entendidos por todos, mas espero que isso possa trazer um pequeno ganho e tornar a codificação mais agradável para você.