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()
相关推荐
M1A16 分钟前
全栈开发必备:Windows安装VS Code全流程
前端·后端·全栈
蜗牛快跑1237 分钟前
github 源码阅读神器 deepwiki,自动生成源码架构图和知识库
前端·后端
嘻嘻嘻嘻嘻嘻ys8 分钟前
《Vue 3.4响应式超级工厂:Script Setup工程化实战与性能跃迁》
前端·后端
장숙혜11 分钟前
ElementUi的tabs样式太难修改,自定义tabs标签页
前端·javascript
用户214118326360212 分钟前
dify案例分享-魔搭+Dify王炸组合!10分钟搭建你的专属 生活小助理
前端
工呈士13 分钟前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
WEI_Gaot15 分钟前
zustand 基础和进阶
前端·react.js
程序员Qian18 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户20311966009620 分钟前
sheet的基本用法
前端
火星思想26 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计