1 <template>
 2     <div>
 3         <h2>遍历数组</h2>
 4        <ul>
 5            <!--  npm i shortid --save -->
 6            <li v-for="(p, index) in persons" :key="personsKeys[index]">id:{{personsKeys[index]}}------------->{{index}}姓名: {{p.name}}年龄:{{p.age}}性别:{{p.sex}}</li>
 7        </ul>
 8        <!-- 遍历对象 -->
 9        <ul>
10            <!--  npm i shortid --save -->
11            <li v-for="(item, key) in persons[0]">------------->{{index}}姓名: {{item}}</li>
12        </ul>
13     </div>
14 </template>
15 <script>
16 import shortid from 'shortid'
17 export default {
18     name:'listRender',
19     data(){
20         return{
21           persons:[
22               {name:'张三',age:18,sex:'男'},
23               {name:'李四',age:16,sex:'男'},
24               {name:'易遥',age:15,sex:'女'},
25               {name:'如花',age:18,sex:'女'},
26               {name:'夜华',age:18,sex:'男'}
27               
28 
29           ]  ,
30           personsKeys:[]
31         }
32     },
33     mounted(){
34         this.personsKey =this.persons.map(v=>shortid.generate())
35     }
36 }
37 </script>
38 <style scoped>
39 ul{
40     list-style: none;
41 }
42 </style>