nanoid
nanoid和uuid差不多都可以生成一个唯一的id。但是他比uuid更加的轻便。
首先安装nanoid:
npm i nanoid
引入:
import {nanoid} from 'nanoid'
使用:
//nanoid()
let obj = {id:nanoid(),name:this.name};
完整代码:
<template>
<div>
<input type="text" v-model="name">
<button @click="addList">添加</button>
<div style="margin-top: 30px">
<ul>
<li v-for="(item,index) in list" :key="item.id">{{item}}</li>
</ul>
</div>
</div>
</template>
<script>
//引入nanoid
import {nanoid} from 'nanoid'
export default {
name: "demo5",
data(){
return {
name:'',
list:[],
}
},
methods:{
addList(){
if(this.name){
//使用nanoid
let obj = {id:nanoid(),name:this.name};
this.list.unshift(obj);
this.name = ''
}
}
}
}
</script>
<style scoped>
</style>
效果图:
以上就是nanoid的基本使用。