由于vue的for循环id并不严谨，提高id严谨性

如果后台没有传入id，我们拿到的数据没有id修改等操作不方便，如何拿到id呢

https://github.com/dylang/shortid 提供唯一id

插件的引入和使用：

<template>
<div>
 <h3>遍历数组</h3>
<ul>
<li v-for="(person,index) in persons " key="personsKeys[index]"> 
id: {{personsKeys[index]}}<br/>
 姓名 : {{person.name}},
年龄 : {{person.age}},
性别 : {{person.sex}},


</li>

</ul>

</div>
</template>
<script>
import shortId from 'shortid'
export default{
    name:"ifAndShow",
    data(){
        return {
            persons:[
                {name:'张三',age:18,sex:'男'},
                {name:'张三2',age:128,sex:'男'},
                {name:'张三3',age:138,sex:'男'},
                {name:'张三4',age:148,sex:'男'},
                {name:'张三5',age:158,sex:'男'},
                {name:'张三6',age:168,sex:'男'},
                {name:'张三7',age:178,sex:'男'},

                
                ],

                personsKeys:[]
        }
    },
    //生命周期方法
    mounted(){
        this.personsKeys=this.persons.map(v=>shortId.generate())
    }
}
</script>
<style scoped>
</style>

由于vue的for循环id并不严谨，提高id严谨性

推荐阅读