Vue 의 v-for 순환 key 속성 주의사항 소결

2508 단어 vuev-forkey
Vue 가 v-for 로 렌 더 링 된 요소 목록 을 업데이트 하고 있 을 때 기본적으로'현지에서 재 활용'정책 을 사용 합 니 다.데이터 항목 의 순서 가 바 뀌 면 Vue 는 데이터 항목 의 변화 와 일치 하 는 DOM 요 소 를 이동 하 는 것 이 아니 라 이 요소 들 을 간단하게 재 활용 하여 특정한 색인 에서 보 여 준 모든 요 소 를 표시 하도록 합 니 다.
모든 노드 의 신분 을 추적 하여 기 존 요 소 를 다시 정렬 하고 정렬 할 수 있 도록 Vue 에 게 힌트 를 주기 위해 서 는 모든 항목 에 유일한 key 속성 을 제공 해 야 합 니 다.key 속성의 유형 은 string 이나 number 형식 만 가능 합 니 다.
다음 예 에서 p 요소 에 key 를 연결 하지 않 으 면 첫 번 째 를 선택 하 겠 습 니 다.

그리고 ID 와 Name 을 입력 하고 추가 단 추 를 누 르 면 다음 과 같은 상황 이 발생 합 니 다.추 가 된 요소 가 선 택 됩 니 다.키 속성 을 연결 하면 이런 상황 이 발생 하지 않 습 니 다.

전체 코드:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
<body>
 <div id='app'>
  <!--v-for      -->
  <div>
   <label>ID:<input type="text" v-model="id"></label>
   <label>Name:<input type="text" v-model="name"></label>
   <input type="button" value="  " @click="add" />
  </div>
  <!--  ：v-for     ，key      number string -->
  <!--  ：key     ，    v-bind       ，  key   -->
  <!--     ，   v-for     ，          ，  v-for   ，
        v-for   ，         /     :key  -->
  <p v-for="item in list" :key="item.id">
   <input type="checkbox"/>
   {{item.id}}--{{item.name}}
  </p>
  
 </div>
</body>
<script src="vue.min.js"></script>
<script>
 var vm = new Vue({
  el:'#app',
  data:{
   id:"",
   name:"",
   list:[
    {id:1, name:'  '},
    {id:2, name:'  '},
    {id:3, name:'  '},
    {id:4, name:'  '},
    {id:5, name:'  '},
   ],
  },
  methods:{
   add(){
    this.list.unshift({id:this.id,name:this.name});
   }
  }
 });
</script>
</html>
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 의 v-for 순환 key 속성 주의사항 소결 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다!
Vue 좌우 메뉴 연동 구현 코드
vue 상품 가감 계산 총가격 실현 실례 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage