Wie man die VUE v-for-Schleife besser nutzt

Machen Sie es sich zur Gewohnheit, gemeinsam zu schreiben! Dies ist der 8. Tag meiner Teilnahme an der „Nuggets Daily New Plan · April Update Challenge“, klicken Sie hier, um die Details der Veranstaltung anzuzeigen .

1. Einleitung

Es ist vertrauten vueEntwicklern nicht fremd v-for, da es im Entwicklungsprozess verwendet werden muss. Wir verwenden es oft, um Arrays oder Objekte zu durchlaufen und Listen anzuzeigen. Heute werden wir einige häufige Verwendungen und Vorschläge auflisten, damit wir sie besser nutzen können.

2. Gebrauchsanweisung

2.1 v-forLegen Sie :keySchlüsselwert fest

• Die Verwendung von Werten in Schleifen ist :keyauch die offiziell empfohlene Methode.

• In Ermangelung von settings :key, wenn wir das Array dynamisch ändern, kann es zu Situationen außerhalb der Reihenfolge kommen. Wenn Sie es im folgenden Code entfernen :key="student.id", einen Schüler auswählen und dann auf klicken, um einen Schüler hinzuzufügen, tritt eine Störung auf.

• :keyJedes Element wird eine eindeutige Schlüsselreferenz haben, und es wird für uns bequemer sein, Daten zu manipulieren.

<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 Verwendung von indexIndizes in Schleifen

Zusätzlich zur Angabe der Schleifendefinition :keykönnen wir auch auf den Index in der Schleife zugreifen, der Index ist eine Ordnungszahl, die bei 0 beginnt.

<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 Verwenden filtervon Methoden zum Filtern von Elementen

Manchmal müssen wir die Daten für die Anzeige filtern und filtern oder gemäß dem obigen Beispiel Änderungen vornehmen und das Feld für die Schülerpunktzahl hinzufügen.

Wir müssen die bestandenen Ergebnisse der Schüler filtern, dann können wir dies durch Schleifenfilterung tun filter. Tatsächlich v-ifkann auch das Beurteilen der Punktzahl den Effekt erzielen, es wird jedoch nicht empfohlen, sich damit auseinanderzusetzen, da die Daten auch in einer Schleife gerendert werden und die Leistung nicht maximiert werden kann.

<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 Nicht v-forverwenden inv-if

Bitte versuchen Sie nicht , es in v-forzu verwenden v-if, wenn Sie die Daten filtern müssen, verwenden Sie die filterMethode. Wenn Sie wirklich beurteilen müssen, ob der Inhalt des Moduls angezeigt werden soll, wird empfohlen, eine Beurteilung v-ifauf der oberen Ebene vorzunehmen.v-if

Wenn beispielsweise das obige Beispiel geändert wird, ist es notwendig zu beurteilen, dass die Inhaltsinformationen nur angezeigt werden, wenn es sich um einen Lehrer handelt. isTeacherZu Medium hinzugefügt ul, nicht liMedium.

<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>
复制代码

Zusammenfassen

Die in diesem Artikel kurz vorgestellten Use Cases wurden v-forvielleicht von allen verwendet oder verstanden, aber ich hoffe, es kann Ihnen einen kleinen Gewinn bringen und das Codieren für Sie angenehmer machen.