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()
相关推荐
速易达网络35 分钟前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou37 分钟前
js前端this指向规则
开发语言·前端·javascript
lichong95138 分钟前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer39 分钟前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong95140 分钟前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马1 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱2 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌2 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静2 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿2 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端