Vue------shortid组件的安装及使用

一、shortid组件安装步骤

插件shortid是生成随机ID的

1. cmd 进入到项目目录中，输入npm i shortid --save 或 在webstorm项目中右击，Open in Terminal中输入：npm i shortid --save
2. 导入shortid模块 : import shortid from ‘shortId’
3. 定义数组，装安装的id
4. shortId.generate()
5. 卸载shortid的命令：npm uninstall shortid

二、使用shortid生成随机id

例子

<template>
    <div id="box">
        <ul>
            <li v-for="(i,index) in people" :key="id[index]">
                {{i.name}} {{i.age}} {{i.sex}} key {{id[index]}}
            </li>
        </ul>
    </div>

</template>

<script>
    import shortId from 'shortid'
    export default {
        name: "List",
        data(){
            return{
                people:[
                    {name:"张三",age:20,sex:"男"},
                    {name:"李四",age:21,sex:"女"},
                    {name:"王五",age:22,sex:"男"}
                ],
                id:[]//装生成的id(shortid)
            }
        },
        mounted(){
            this.id=this.people.map(value => shortId.generate());
        }
    }
</script>

运行截图