Maison >Problème commun >Le rôle de la clé v-for
Le rôle de la clé v-for
- (*-*)浩original
- 2020-01-06 10:37:0324914parcourir
peut actuellement être compris comme un identifiant unique pour parcourir un tableau ou un élément lors de l'ajout ou de la suppression d'un élément, cette clé d'identifiant unique est utilisée pour déterminer s'il s'agit du précédent. element et l'élément Quelle est la valeur de key. Cet identifiant unique reste inchangé.
Vue fournit un attribut pour v-for, clé : Pour améliorer l'efficacité du rendu V ! Vue ne modifiera pas les éléments et les données d'origine, mais créera de nouveaux éléments et y restituera les nouvelles données Lors de l'utilisation de v-for, vue nous demande d'ajouter un attribut clé à l'élément. un identifiant unique
Le contenu attribué à la clé ne peut pas être variableLors de l'écriture de v-for, vous devez attribuer des éléments pour ajouter un attribut de clé 2. La fonction principale de la clé est d'améliorer les performances de rendu !
3. L'attribut key peut éviter la confusion des données (si l'élément contient des éléments avec des données temporaires, une confusion des données se produira si la clé n'est pas utilisée)<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!