Vue中使用 shortid 插件随机生成key的id

1、安装

1.项目终端中输入
npm i shortid --save 
或者
cnpm i shortid --save（笔者使用npm安装后出现错误所以还是推荐淘宝镜像）
2.导入模块
import shortid from "shortid"
3.定义数组，根据需要配合的数组或对象创建相应数量的id,这里需要使用到插件中的方法**shortid.generate()**

2、使用方法举例

<template>
  <div class="hello">
    <ul>
    <--需要不同key值时尽量不要使用index直接赋值-->
      <li v-for="(item,index) in array" :key="arrayKeys[index]">
        姓名：{{item.name}} 年龄：{{item.age}} 性别：{{item.sex}} 
        {{arrayKeys[index]}}
      </li>
    </ul>
  </div>
</template>

<script>
import shortid from "shortid"
export default {
  props: {
    msg: String
  },
  data(){
    return {
        array:[
      {name:"陈亮",age:27,sex:"男"},
      {name:"陈亮",age:27,sex:"男"},
      {name:"陈亮",age:27,sex:"男"}
      ],
      arrayKeys:[]
    }
  },
  mounted(){
  //根据要进行列表渲染的数组元素数量使用shortid.generate()创建对应的数组元素
    this.arrayKeys = this.array.map(value=>shortid.generate())
  }
}
</script>

3、效果展示（生成了不同ID）