浅谈VUE中演示v-for为什么要加key

网络编程 2024/11/29 佚名

3 2 1

说到这个问题想必要举个例子了

没有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>
  // 创建 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>

当选中吕不为时，添加楠楠后选中的确是李斯，并不是我们想要的结果，我们想要的是当添加楠楠后，一种选中的是吕不为

有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>
  // 创建 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>

同样当选中吕不为时，添加楠楠后依旧选中的是吕不为。