vue点击项目唯一id生成器nanoid的使用方式
更新时间:2022年05月24日 10:26:18 作者:每一天,每一步
这篇文章主要介绍了vue点击项目唯一id生成器nanoid的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
点击项目唯一id生成器nanoid使用
UUID是软件开发中最常用的通用标识符之一。
nanoid库和uuid库一样都可以生成uuid,但是nanoid相比uuid要更轻量级。
nanoid的安装
npm i nanoid // 或者 yarn add nanoid
nanoid的使用
import { nanoid } from 'nanoid' let id = nanoid() //也可以指定生成字符串的长度 //let id = nanoid(5)
前端常用库——nanoid
nanoid库和uuid库一样都可以生成uuid,但是nanoid相比uuid要更轻量级,下面就来演示一下如何在项目中使用nanoid。
1.在项目目录下打开终端,下载安装nanoid库
npm i nanoid
或者,如果你安装了yarn可以使用:
yarn add nanoid
2.引入nanoid库
nanoid库中用分别暴露的方式暴露了一个函数nanoid
import {nanoid} from 'nanoid'
3.使用nanoid生成uuid
直接调用nanoid(),即可生成一个uuid
import React, { Component } from 'react' import {nanoid} from 'nanoid' import "./index.css" export default class Header extends Component { handleKeyUp = (event) => { const {keyCode, target} = event; // 判断是否是回车 if (keyCode !== 13) return if (target.value.trim() === '') { alert("输入不能为空") return } const todoObj = {id:nanoid(),name:target.value,done:false} this.props.addTodo(todoObj) target.value = '' } render() { return ( <div className="todo-header"> <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称,按回车键确认"/> </div> ) } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue项目报错Uncaught runtime errors的解决方案
使用vue-cli的vue项目,出现编译错误或警告时,在浏览器中显示全屏覆盖,提示报错Uncaught runtime errors,本文给大家介绍了vue项目报错Uncaught runtime errors的解决方案,需要的朋友可以参考下2024-01-01vue2中如何更改el-dialog出场动画(el-dialog弹窗组件)
el-dialog是一个十分好用的弹窗组件,但是出场动画比较单调,于是决定自定义一个出场动画,本文通过实例代码图文相结合给大家叙述下实现思路,感兴趣的朋友一起看看吧2022-06-06解决vue+ element ui 表单验证有值但验证失败问题
这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败,本文通过实例代码给大家分享解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论