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()
相关推荐
小白菜学前端几秒前
Vue 配置代理
前端·javascript·vue.js
m0_zj8 分钟前
63.[前端开发-Vue3]Day05-非父子通信-声明周期-refs-混合-额外补充
前端·javascript·vue.js
golang学习记20 分钟前
Cursor1.7发布,AI编程的含金量还在上升!
前端
北辰alk26 分钟前
Next.js 为何抛弃 Vite?自造轮子 Turbopack 的深度技术解析
前端
Cache技术分享1 小时前
203. Java 异常 - Throwable 类及其子类
前端·后端
wingring1 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码
前端
LFly_ice1 小时前
学习React-20-useId
前端·学习·react.js
要加油哦~1 小时前
刷题 | 牛客 - 前端面试手撕题 - 中等 - 1-2/20 知识点&解答
前端·面试
Async Cipher1 小时前
JSON-LD 的格式
前端·javascript
Dontla1 小时前
Next.js项目演示(从零创建Next.js项目)Next.js入门实战
开发语言·javascript·ecmascript