vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
更新時(shí)間：2022年05月24日 10:26:18 作者：每一天，每一步
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
點(diǎn)擊項(xiàng)目唯一id生成器nanoid使用
UUID是軟件開發(fā)中最常用的通用標(biāo)識(shí)符之一。
nanoid庫和uuid庫一樣都可以生成uuid，但是nanoid相比uuid要更輕量級(jí)。
nanoid的安裝
npm i nanoid? // 或者 yarn add nanoid
nanoid的使用
import { nanoid } from 'nanoid'?
let id = nanoid()
?
//也可以指定生成字符串的長(zhǎng)度
//let id = nanoid(5)前端常用庫——nanoid
nanoid庫和uuid庫一樣都可以生成uuid，但是nanoid相比uuid要更輕量級(jí)，下面就來演示一下如何在項(xiàng)目中使用nanoid。
1.在項(xiàng)目目錄下打開終端,下載安裝nanoid庫
npm i nanoid
或者，如果你安裝了yarn可以使用：
yarn add nanoid
2.引入nanoid庫
nanoid庫中用分別暴露的方式暴露了一個(gè)函數(shù)nanoid
import {nanoid} from 'nanoid'3.使用nanoid生成uuid
直接調(diào)用nanoid()，即可生成一個(gè)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="請(qǐng)輸入你的任務(wù)名稱，按回車鍵確認(rèn)"/>
</div>
)
}
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何設(shè)置button的disable屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
uniapp中使用lottie實(shí)現(xiàn)JSON動(dòng)畫的操作步驟
這篇文章主要介紹了如何在項(xiàng)目中使用JSON動(dòng)畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
v-show和v-if的區(qū)別?及應(yīng)用場(chǎng)景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場(chǎng)景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下2022-06-06
本篇文章主要介紹了如何在 Vue.js 中使用第三方j(luò)s庫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Vue函數(shù)式組件的應(yīng)用實(shí)例詳解
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實(shí)例詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中使用debugger在瀏覽器中不起作用的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫的步驟
最近在Vue項(xiàng)目中引入高德地圖,實(shí)現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2024-09-09
Vue利用canvas實(shí)現(xiàn)移動(dòng)端手寫板的方法
本篇文章主要介紹了Vue利用canvas實(shí)現(xiàn)移動(dòng)端手寫板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05