v-for 키의 역할-일반적인 문제-php.cn

v-for 키의 역할

(*-*)浩

풀어 주다： 2020-01-06 10:37:03

원래의

24849명이 탐색했습니다.

v-for 키의 역할

현재는 배열이나 요소를 순회하기 위한 고유 식별자로 이해될 수 있습니다. 이 고유 식별자 키는 요소를 추가하거나 삭제할 때 사용됩니다. 이전 요소인지 여부와 요소의 키 값이 무엇인지 확인합니다. 이 고유 식별자는 변경되지 않습니다.

Vue는 v-for, 키에 대한 속성을 제공합니다: > 의 v-렌더링용! Vue는 원래 요소와 데이터를 변경하지 않지만 새 요소를 생성하고 새 데이터를 그 안에 렌더링합니다 v-for를 사용할 때 vue에서는 요소 속성에 키를 추가해야 합니다. 고유 식별자여야 합니다

키에 할당된 콘텐츠는 변수일 수 없습니다.

1을 작성할 때 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!