v-for キーの役割-よくある問題-php.cn

v-for キーの役割

(*-*)浩

リリース： 2020-01-06 10:37:03

オリジナル

24849 人が閲覧しました

v-for キーの役割

は現在、配列または要素の一意の識別子として理解できます。要素を追加または削除するとき、この一意の識別子のキーは、それが前の要素であるかどうかを判断するために使用されます。、要素はキーの値です。この一意の識別子は変更されません。

Vue は v-for, key の属性を提供します: (推奨学習: phpstorm)

key 属性は次の目的で使用できます。 v-for レンダリングの効率を向上させます! Vue は元の要素とデータを変更しませんが、新しい要素を作成し、その中に新しいデータをレンダリングします。

v-for を使用する場合、vue では要素にキー属性を追加する必要があります。このキー属性は次のとおりです。一意の識別子であることを指定してください

キーに割り当てられるコンテンツを変数にすることはできません

1. v-for を記述するときは、要素にキー属性を追加する必要があります

2. キーの主な機能は、レンダリングのパフォーマンスを向上させることです。

3. key 属性によりデータの混乱を回避できます (要素に一時データを持つ要素が含まれる場合、キーを使用しないとデータの混乱が発生します)

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

ログイン後にコピー

以上がv-for キーの役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。