在v-for的缺陷中最后一段话
image.png
故需要一个key值

使用key的效果图

key.gifkey2.gif
你会发现v-for的缺陷解决啦

源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../src/vue.js"></script>
  10. </head>
  12. <body>
  13.     <ul id="app">
  14.         <!-- 添加key -->
  15.         <li v-for="(person, index) in persons" :key='person'>
  16.             {{ person }}
  17.             <input type="text" :class="person"/>
  18.             <button @click="handleClick(index)">下移{{person}}</button>
  19.         </li>
  20.     </ul>
  21.     <script>
  22.         const vm = new Vue({
  23.             el: '#app',
  24.             data: {
  25.                 persons: ['zzz', 'xxx', 'ccc', 'vvvv']
  26.             },
  27.             methods: {
  28.                 handleClick(index) {
  29.                     const deleteItem = this.persons.splice(index, 1);
  30.                     console.log(index)
  31.                     this.persons.splice(index + 1, 0, ...deleteItem);
  32.                 }
  33.             }
  34.         })
  35.     </script>
  36. </body>
  38. </html>

讲解

key的使用方法

预期值：number | string
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。

  1. <ul id="app">
  2.   <li v-for="(person, index) in persons" :key="person">
  3.     {{ person }}
  4.   </li>
  5. </ul>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     persons:['杉杉', '思彤哥', '成哥', '邓哥']
  5.   }
  6. })

不建议将数组的索引作为key值，如：

  1. <li v-for="(person, index) in persons" :key="index">
  2.   {{ person }}
  3. </li>

当改变数组时，页面会重新渲染，Vue会根据key值来判断要不要移动元素。例如当页面重新渲染时，key值为”杉杉”的元素为<li>杉杉</li>，页面重新渲染前，key值为”杉杉”的元素也为<li>杉杉</li>，那么Vue就会移动这个li元素，而不是重新生成一个元素。
当使用数组的索引作为key值时，页面重新渲染后，元素的key值会重新被赋值，例如我们将数组进行反转，
反转前：

元素 key值
<li>杉杉</li> 0
<li>思彤哥</li> 1
<li>成哥</li> 2
<li>邓哥</li> 3

反转后：

元素 key值
<li>邓哥</li> 0
<li>成哥</li> 1
<li>思彤哥</li> 2
<li>杉杉</li> 3

Vue会比对渲染前后拥有同样key的元素，发现有变动，就会再生成一个元素，如果用索引作key值得话，那么此时，所有的元素都会被重新生成。
那么key如何唯一的？
跟后台协作时，传回来的每一条数据都有一个id值，这个id就是唯一的，用id做key即可。
key不仅为v-for所有，它可以强制替换元素，而不是重复使用它：

  1. <ul id="app">
  2.   <button @click="show = !show">{{ show ? '显示' : '隐藏'}}</button>
  3.   <input type="text" v-if="show" key="a" />
  4.   <input type="text" v-else key="b" />
  5. </ul>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     show: true
  5.   }
  6. })