快捷導(dǎo)航

淺談VUE中演示v-for為什么要加key

更新時間：2020年01月16日 16:38:18 作者：Nanshannan

這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

說到這個問題想必要舉個例子了

沒有key

 <div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">添加</button>
  </div>
  <ul>
   <li v-for="(item, i) in list">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 創(chuàng)建 Vue 實例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '李斯' },
     { id: 2, name: '呂不韋' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //注意這里是unshift
     this.list.unshift({ id: ++this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

當(dāng)選中呂不為時，添加楠楠后選中的確是李斯，并不是我們想要的結(jié)果，我們想要的是當(dāng)添加楠楠后，一種選中的是呂不為

有key

 <div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">添加</button>
  </div>
  <ul>
   <li v-for="(item, i) in list" :key="item.id">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 創(chuàng)建 Vue 實例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '李斯' },
     { id: 2, name: '呂不韋' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //注意這里是unshift
     this.list.unshift({ id: ++this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

同樣當(dāng)選中呂不為時，添加楠楠后依舊選中的是呂不為。