Vue3 前端生成随机id( 生成 UUID )

效果展示

封装工具(代码展示)

重新创建一个文件**/utils/someTools.js**,并在里面写入如下代码。

js 复制代码
function Tools() {

}

Tools.prototype.guid = function () {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

const tools = new Tools();
export default tools;

实际运用-----SomeTools.guid()

随机打开一个你想要生成id的文件,先引入文件,然后调用**guid()**方法。

js 复制代码
import { ref } from 'vue'
import SomeTools from '@/utils/someTools.js' 
 
//直接这样就可以使用啦
//SomeTools.guid()

//可以直接赋值使用,例如:
const id = ref(null)
id.value = SomeTools.guid()
相关推荐
周凡1238 分钟前
AI 时代的 Web JavaScript 逆向分析实践与思考
前端·javascript·人工智能
jerryinwuhan14 分钟前
marker BiBERTo解释
java·前端·人工智能
zhoumeina9922 分钟前
分段创建产品,tab 页切换又要保留缓存
前端·javascript
SilentSamsara23 分钟前
命令行工具开发:Click/Typer + 打包为独立二进制
linux·服务器·开发语言·前端·python·青少年编程·fastapi
恋猫de小郭26 分钟前
能在手机本地跑的图像生成模型 Bonsai Image ,效果还不错
前端·aigc·ai编程
Bigger27 分钟前
实战:搭建 AI Code Review 自动化流水线
前端·ci/cd·自动化运维
IT_陈寒33 分钟前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
The Sheep 202335 分钟前
EFcore 查询数据
java·javascript
怕浪猫39 分钟前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览42 分钟前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js