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、使用方法举例<templat
·
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)
更多推荐
已为社区贡献1条内容
所有评论(0)