Heim >häufiges Problem >Die Rolle des V-für-Schlüssels
Die Rolle des V-für-Schlüssels
- (*-*)浩Original
- 2020-01-06 10:37:0324915Durchsuche
kann derzeit als eindeutiger Bezeichner zum Durchlaufen eines Arrays oder Elements verstanden werden. Beim Hinzufügen oder Löschen eines Elements wird dieser eindeutige Bezeichnerschlüssel verwendet, um zu bestimmen, ob es sich um das vorherige handelt Element und das Element Was ist der Wert des Schlüssels? Diese eindeutige Kennung bleibt unverändert.
Vue bietet ein Attribut für v-for, Schlüssel: Um die Effizienz des V-for-Renderings zu verbessern! Vue ändert nicht die ursprünglichen Elemente und Daten, sondern erstellt neue Elemente und rendert die neuen Daten in diese. Bei Verwendung von v-for müssen wir dem Element ein Schlüsselattribut hinzufügen eine eindeutige Kennung
Der dem Schlüssel zugewiesene Inhalt darf nicht variabel sein1 Beim Schreiben von v-for müssen Sie dem Element ein Schlüsselattribut hinzufügen 2. Die Hauptfunktion von key besteht darin, die Rendering-Leistung zu verbessern!
3. Das Schlüsselattribut kann Datenverwechslungen vermeiden (wenn das Element Elemente mit temporären Daten enthält, kommt es zu Datenverwechslungen, wenn der Schlüssel nicht verwendet wird)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in teachers" :key="item.id">{{ item.name }} <input type="text"></li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
teachers: [
{ id: 1, name: "aaa" },
{ id: 2, name: "bbb" },
{ id: 3, name: "ccc" },
{ id: 4, name: "ddd" }
]
}
});
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonDie Rolle des V-für-Schlüssels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!