uni-app + vue3实现input输入框保留2位小数的逻辑

首先说明输入框中的格式限制如下:

(1)当第一位为0时,第二位只能输入小数点,且不能输入其他数字(如00)

(2)当第一位不为0时,后边不限制

(3)数据中只能输入一个小数点

(4)小数点后边保留2位

不说废话,直接上代码:

<input type="text" v-model="inputValue" @input="handleInput" />const inputValue = ref('')/*** 功能: 数据格式校验【保留2位小数】* e: input返回的值*/
const handleInput = (e: any) => {// 一定要加nextTick,否则特殊情况的更改不生效【如:000时,更改为0】nextTick(() => {let value = e.detail.value// 如果当前输入为空,直接允许清空if (!value) {inputValue.value = ''} else if (value?.charAt(0) === '0' && value.charAt(1) && value.charAt(1) !== '.') {// // 1. 当第一位为0时,只能输入小数点【第二位必须是小数点】value = '0'}value = value.replace(/[^\d.]/g, '') // 清除"数字"和"."以外的字符value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的value = value.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 保留2位小数inputValue.value = valuereturn})
}

注意在handleInput方法中,一定要使用nextTick,否则部分赋值无效

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

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

相关文章

Kaldi sherpa-ncnn 端侧语音识别

本文介绍一款基于新一代 Kaldi 的、超级容易安装的、实时语音识别 Python 包:sherpa-ncnn。 小编注: 它有可能是目前为止,最容易 安装的实时语音识 别 Python 包(谁试谁知道)。 它的使用方法也是极简单的。 安装 pip install sherpa-ncnn对的,就是这一句,所有的依赖都从…

论文阅读《Semantic Prompt for Few-Shot Image Recognition》

论文地址&#xff1a;https://arxiv.org/pdf/2303.14123.pdf 论文代码&#xff1a;https://github.com/WentaoChen0813/SemanticPrompt 目录 1、存在的问题2、算法简介3、算法细节3.1、预训练阶段3.2、微调阶段3.3、空间交互机制3.4、通道交互机制 4、实验4.1、对比实验4.2、组…

【C++】哈希思想的应用(位图、布隆过滤器)及海量数据处理方法

文章目录 前言位图什么是位图简单实现一个自己的位图位图的应用场景 布隆过滤器位图的缺陷及布隆过滤器的提出布隆过滤器的概念简单实现一个自己的布隆过滤器布隆过滤器的优缺点布隆过滤器的应用场景 海量数据处理 前言 哈希思想的在实际中的应用除了哈希表这个数据结构之外还…

【Redis 知识储备】读写分离/主从分离架构 -- 分布系统的演进(4)

读写分离/主从分离架构 简介出现原因架构工作原理技术案例架构优缺点 简介 将数据库读写操作分散到不同的节点上, 数据库服务器搭建主从集群, 一主一从, 一主多从都可以, 数据库主机负责写操作, 从机只负责读操作 出现原因 数据库成为瓶颈, 而互联网应用一般读多写少, 数据库…

【Pytorch学习笔记(三)】张量的运算(2)

一、引言 在《张量的运算(1)》中我们已经学习了几种张量中常用的非算数运算如张量的索引与切片&#xff0c;张量的拼接等。本节我们继续学习张量的算术运算。 二、张量的算术运算 &#xff08;一&#xff09;对应元素的加减乘除 在 PyTorch 中&#xff0c;张量的对应元素的…

C++的List类(一):List类的基本概念

目录 前言 List类的基本概念 List的构造函数 List类迭代器的使用 List的功能 List的元素访问 List与vector比较 前言 vector的insert和erase都会导致迭代器失效list的insert不会导致迭代器失效&#xff0c;erase会导致迭代器失效 insert导致失效的原因是开辟了新空间后…

massif-visualizer qpa.plugin: Could not load the Qt platform plugin “xcb“ in

massif-visualizer qpa.plugin: Could not load the Qt platform plugin "xcb" in 报这个错误&#xff0c;是因为&#xff0c;必现在 界面窗口 执行 $ massif-visualizer massif.log 如果是ssh远程链接执行&#xff0c;就会报错. #windows上查看 需要 安装远程桌…

全球化业务的网络安全挑战

随着企业业务的全球化&#xff0c;跨国数据传输和用户跨地域访问成为常态。这不仅带来了巨大的商业机会&#xff0c;也带来了以下网络安全挑战&#xff1a; 数据泄露风险&#xff1a;跨国数据传输增加了数据被截获和泄露的风险。访问限制&#xff1a;某些地区可能对互联网内容…

Failed to start docker.service: Unit docker.service is masked.

Failed to start docker.service: Unit docker.service is masked. 未知原因&#xff1a;docker 被mask 解决方式&#xff1a; systemctl unmask docker.service systemctl unmask docker.socket systemctl start docker.service Docker是一种相对使用较简单的容器&#xff0…

Visual Studio 2022-C语言如何防止头文件多次引入

头文件的包含 本地⽂件包含 #include "filename" 查找策略&#xff1a;先在源⽂件所在⽬录下查找&#xff0c;如果该头⽂件未找到&#xff0c;编译器就像查找库函数头⽂件⼀样在 标准位置查找头⽂件。 如果找不到就提⽰编译错误。 Linux环境的标准头⽂件的路径&…

如何自定义项目启动时的图案

说明&#xff1a;有的项目启动时&#xff0c;会在控制台输出下面的图案。本文介绍Spring Boot项目如何自定义项目启动时的图案&#xff1b; 生成字符图案 首先&#xff0c;找到一张需要设置的图片&#xff0c;使用下面的代码&#xff0c;将图片转为字符文件&#xff1b; impo…

【Unity每日一记】鼠标相关API

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

【WPF应用38】WPF 控件打开文件选择-OpenFileDialog的详解与示例

在 WPF 应用程序中&#xff0c;经常需要让用户选择文件&#xff0c;例如打开图片、文本文件等。OpenFileDialog 是一个用于实现这个功能的控件。本文将详细介绍 OpenFileDialog 的使用流程&#xff0c;并提供一个完整的示例代码。 一、WPF 控件打开文件选择的必要性 在 WPF 应…

Linux初学(十七)redis

一、简介 redis就是一个内存数据库 redis中的数据&#xff0c;都是保存在内存中 端口&#xff1a;6379 二、安装redis 方法一&#xff1a;编译安装 方法二&#xff1a;yum安装-epel 第一步&#xff1a;配置epel源 详见&#xff1a;http://t.csdnimg.cn/AFl1K第二步&#xff1a…

GaN肖特基势垒二极管(SBD)的多阴极应用建模与参数提取

GaN Schottky Barrier Diode (SBD) Modeling and Parameter Extraction for Multicathode Application&#xff08;TED 24年&#xff09; 摘要 本文提出了一种适用于多阴极应用的紧凑型可扩展GaN肖特基二极管大信号模型。详细给出了外在和内在模型参数的可扩展规则。实验和理…

kamailio mysql数据表解析

kamctl db exec "show tables;" 查询mysql数据表 acc&#xff1a;存储呼叫详单&#xff08;Call Detail Records, CDRs&#xff09;的信息&#xff0c;包括呼叫持续时间、呼叫状态、被叫号码等。这些记录有助于统计和分析呼叫的数据。 acc_cdrs&#xff1a;存储呼叫…

HTTP的强制缓存和协商缓存

HTTP的强制缓存和协商缓存 HTTP的缓存技术强制缓存ExpiresCache-Control 协商缓存If-Modified-Since和Last-ModifiedIf-None-Match和ETag优先级 可被缓存的请求方法总结 HTTP的缓存技术 当我们进行HTTP请求时&#xff0c;需要将请求报文发送给对端&#xff0c;当服务端收到请求…

Stm32 HAL库 访问内部flash空间

Stm32 HAL库 访问内部flash空间 代码的部分串口配置申明文件main函数 在一些时候&#xff0c;需要存储一些数据&#xff0c;但是又不想接外部的flash&#xff0c;那我们可以知道&#xff0c;其实还有内部的flash可以使用&#xff0c; 需要注意的是内部flash&#xff0c;读写次数…

书生浦语训练营二期第三次作业

文章目录 基础作业1. 在茴香豆 Web 版中创建自己领域的知识问答助手第一轮对话第二轮对话第三轮对话第四轮对话第五轮对话 2.在 InternLM Studio 上部署茴香豆技术助手修改配置文件创建知识库运行茴香豆知识助手 基础作业 1. 在茴香豆 Web 版中创建自己领域的知识问答助手 我…

【Docker常用命令(四)】

目录 Docker常用命令&#xff08;四&#xff09;注意 Docker常用命令&#xff08;四&#xff09; docker pause docker pause 命令用于暂停容器中的所有进程。docker pause CONTAINER [CONTAINER...]常用子命令和选项&#xff1a;无特定常用选项。docker port docker port 命令…