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

效果展示

在这里插入图片描述

封装工具(代码展示)

重新创建一个文件**/utils/someTools.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()**方法。

import { ref } from 'vue'
import SomeTools from '@/utils/someTools.js' //直接这样就可以使用啦
//SomeTools.guid()//可以直接赋值使用,例如:
const id = ref(null)
id.value = SomeTools.guid()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/535421.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java基于微信小程序的校园生活互助小助手

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

【计算机视觉】目标跟踪| 光流算法详细介绍|附代码

0、前言 在上篇文章中https://blog.csdn.net/Yaoyao2024/article/details/136625461?spm1001.2014.3001.5501,我们对目标跟踪任务和目标跟踪算法有了大致的了解。今天我们就来详细介绍一下其中的生成式算法的一种:光流法。 在介绍光流法之前&#xff…

【Java基础概述-8】Lambda表达式概述、方法引用、Stream流的使用

1、Lambda表达式概述 什么是Lambda表达式? Lambda表达式是JDK1.8之后的新技术,是一种代码的新语法。 是一种特殊写法。 作用:“核心的目的是为了简化匿名内部类的写法”。 Lambda表达式的格式: (匿名内部类被重写的形参列表){ 被重写的代码 …

SQL注入的场景复现和解决方案

文章目录 一、前言SQL注入是什么? 二、解决方案如何避免SQL注入? 三、案例说明1、案例来源:黑马程序员2、SQL注入演示1.创建应该新的数据库用于测试;2.修改配置3.启动jar包4.打开网页测试5.测试sql注入 3、解决SQL注入方案1\. jav…

OpenCASCADE开发指南<三>:OCC 基础类概述

1、OCC 基础类概述 基础类包括根类组件、 串类组件、 集合容器组件、 标准对象的集合容器组件、向量和矩阵类组件、 基本几何类型组件、 常用数学算法组件、 异常类组件、 数量类组件和应用程序服务组件。 1 根类组件 根类是基本的数据类型和类, 其它所有类都是依此…

vue中如何查看组件有哪些函数与变量

在开发的过程中,经常用到他人的框架,特别是开源框架比如element,uniapp等。其中就涉及到框架里对应的组件。而组件里又有哪些内置的函数,我们通常是去查官方文档。然后很多的时候需求的多样性,要改的地方也是不一样的,…

C#构造函数

C#中的构造函数是一种特殊的方法,用于创建和初始化类的对象。构造函数的名称与类的名称相同,并且没有返回类型。 在C#中,构造函数有以下几种类型: 默认构造函数:如果在类中没有定义构造函数,系统将自动提供…

写给新手的单元测试框架unittest运行的简单问题

当使用unittest框架编写和运行单元测试时,需要遵循以下步骤: 1、导入unittest模块:在代码中首先导入unittest模块。 import unittest 2、创建测试类:创建一个继承自unittest.TestCase的测试类。该类将包含一系列测试方法。 clas…

rancher里的ingress如何配置gzip压缩

方案一,未试验成功,但配置过程值得记录一下 通过配置configmap,然后在ingress的deployment里引用configmap实现。 参考文章 创建configmap apiVersion: v1 kind: ConfigMap metadata:name: nginx-ingress-controllerannotations:{} # k…

怎样提高服务器在网络里的安全性?

在互联网行业中,网络安全是已经必须要重视的一点。不管是哪个行业,一旦不小心,自己经营多年的成果可能就因为安全这个问题。付之东流,用户在通过服务器平台搭建的网络环境中要实时的留意自己的安全问题。 更新和维护操作系统和软件…

C语言学习--pow函数和

1.首先使用pow函数必须要加头文件 : #include<math.h> double pow(double x, double y); pow() 函数用来求 x 的 y 次幂&#xff08;次方&#xff09;&#xff0c;x、y及函数值实际上为double型 注意&#xff0c;在某些特定的情况之下&#xff0c;pow函数的double类型…

如何在群晖NAS部署WPS容器并实现无公网IP远程访问本地office软件

文章目录 1. 拉取WPS Office镜像2. 运行WPS Office镜像容器3. 本地访问WPS Office4. 群晖安装Cpolar5. 配置WPS Office远程地址6. 远程访问WPS Office小结 7. 固定公网地址 wps-office是一个在Linux服务器上部署WPS Office的镜像。它基于WPS Office的Linux版本&#xff0c;通过…