Vue中v-for指令中的key遇到的问题

v-for 给了两个参数key和index，但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象，但是在数组下是没有key值的，而在对象下可以得到key，可以显示出来

1. <div id="app">  
2.         <ul>  
3.             <li v-for="(item,index,key) of list">{{item.n}}  
4.                 <div>index={{ index }}</div>  
5.                 <div>key={{key}}</div>  
6.             </li>  
7.         </ul>  
8.         <div>  
9.             <div v-for="(item,key,index) of obj">  
10.                 {{item}}：{{key}}：{{index}}  
11.             </div>  
12.         </div>  
13.     </div>  
14.     </body>  
15.     <script>  
16.         var app=new Vue({  
17.             el:'#app',  
18.             data:{  
19.                 list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],  
20.                 obj:{color:'red',age:18,sex:'girl'}  
21.             }  
22.         })  
23.     </script> 

显示的效果图：

v-for中的key：

v-for循环数据，当用for来更新已经被渲染的元素时，vue的“就地复用”机，是不会改变数据项的顺序的，如果想要重新排序，需要为每项添加key（也就是每项的唯一id）

当使用v-for正在更新已渲染的元素列表时，它默认使用“就地复用”策略。如果数据项的顺序被改变，vue将不是移动元素来匹配数据的顺序，而是简单的复用此处的每个元素，并且确保他在特定索引下显示已被渲染过的每个元素。经常在列表渲染输出中使用。

   为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。

1. <div v-for="item in items" :key="item.id">  
2.   <!-- 内容 -->  
3. </div>