Cómo usar mejor VUE v-for loop

¡Acostúmbrate a escribir juntos! Este es el octavo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

1. Introducción

vueNo es desconocido para los desarrolladores familiares v-for, porque debe usarse en el proceso de desarrollo. A menudo lo usamos para recorrer matrices u objetos y mostrar listas. Hoy, enumeraremos varios usos comunes y sugerencias, para que podamos usarlo mejor.

2. Instrucciones de uso

2.1 v-forEstablecer :keyvalor clave para cada

• El uso de valores en bucles :keytambién es el método recomendado oficialmente.

• En ausencia de configuraciones :key, cuando cambiamos dinámicamente la matriz, puede haber situaciones fuera de orden. En el siguiente código, si lo elimina :key="student.id", selecciona un estudiante y luego hace clic para agregar un estudiante, habrá un desorden.

• :keyCada elemento tendrá una clave de referencia única, y nos será más conveniente manipular los datos.

<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 Uso de indexíndices en bucles

Además de dar la definición del bucle :key, también podemos acceder al índice del bucle, el índice será un 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 Uso filterde métodos para filtrar elementos

A veces necesitamos filtrar y filtrar los datos para mostrarlos o, según el ejemplo anterior, hacer cambios y agregar el campo de puntaje del estudiante.

Necesitamos filtrar los puntajes de aprobación de los estudiantes, luego podemos hacerlo a través del filtrado de bucle filter. De hecho, v-ifjuzgar la puntuación también puede lograr el efecto, pero no se recomienda lidiar con eso, porque los datos también se procesan en un bucle y el rendimiento no se puede maximizar.

<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 No v-forusar env-if

No intente v-forusarlo en v-if, si necesita filtrar los datos, use el filtermétodo. Si realmente necesita juzgar si mostrar el contenido del módulo, se recomienda hacer un juicio v-ifsobre la capa superior .v-if

Por ejemplo, si se cambia el ejemplo anterior, es necesario juzgar que la información del contenido solo se mostrará cuando se trate de un profesor. isTeacherAgregado a ulmedio, no limedio.

<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

En este artículo, los casos de uso presentados brevemente v-forpueden haber sido utilizados o entendidos por todos, pero espero que pueda brindarle un poco de ganancia y hacer que la codificación sea más agradable para usted.