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>

運行截圖