현재는 배열이나 요소를 순회하기 위한 고유 식별자로 이해될 수 있습니다. 이 고유 식별자 키는 요소를 추가하거나 삭제할 때 사용됩니다. 이전 요소인지 여부와 요소의 키 값이 무엇인지 확인합니다. 이 고유 식별자는 변경되지 않습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
