Le rôle de la clé v-for-Problème commun-php.cn

Le rôle de la clé v-for

(*-*)浩

Libérer： 2020-01-06 10:37:03

original

24847 Les gens l'ont consulté

Le rôle de la clé v-for

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 variable

Lors 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>

Copier après la connexion

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!