VUE中使用插件shortID生成随机ID，map生成新数组

插件shortID生成随机ID

如何使用：
1.在webstorm项目中右击，Open in Terminal

2.输入npm i shortid --save 安装对应的插件

npm i shortid --save

3.在要使用的组件中导入

4.shortId.generate()

import shortId from ‘shortid’

map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。必须有一个function方法和currentValue值。

function(currentValue, index, arr)，function方法就是原数组中每个值必须执行的方法，currentValue值表示为原数组中的值，例本题中V

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

(使用了v-for，
钩子,mounted() {}
.map
）

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

        <h3>遍历对象</h3>
        <ul>
            <li v-for="(item,key) in persons[0]" >
               {{key}}---{{item}}
            </li>
        </ul>
    </div>
</template>

<script>
    import shortId from 'shortid'
    export default {
        name: "ListRender",
        data(){
            return{
                persons:[
                    {name:'ZS',age:'18',sex:'男'},
                    {name:'LS',age:'28',sex:'女'},
                    {name:'WW',age:'38',sex:'男'},
                    {name:'ZL',age:'48',sex:'女'},
                    {name:'LQ',age:'58',sex:'男'}
                ],
                personsKeys:[]
            }
        },
        mounted() {
            this.personsKeys = this.persons.map(v=>shortId.generate());
        }
    }
</script>

<style scoped>

</style>