数字处理系列

(1)将数字转化成中文的过滤器

<template><div><p>数字转中文:{{ 110 | numberToChinese }}</p></div></template><script>export default {filters: {numberToChinese(num) {const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];const units = ['', '十', '百', '千', '万', '十万', '百万', '千万', '亿'];// 将数字转为字符串并分离每个数字let str = String(num);let len = str.length;// 结果字符串let result = '';// 遍历每一个数字,根据其位置决定是否添加单位(十、百、千等)for (let i = 0; i < len; i++) {let n = +str[i]; // 获取数字let unit = units[len - i - 1]; // 获取当前数字的单位// 当遇到"0"时,不添加单位,但处理连续零时只保留一个零if (n === 0) {// 如果结果已有数字,且最后一位不是零,才添加零if (result[result.length - 1] !== chineseNums[0]) {result += chineseNums[0];}} else {result += chineseNums[n] + unit;}}// 处理 "一十" 的特殊情况,中文中 "一十" 应写作 "十"result = result.replace(/^一十/, '十');// 处理结果最后的"零"(如果是零结尾的数字,比如 1000,应去掉多余的零)result = result.replace(/零+$/, '');return result;}}};</script>

(2)正整数

el-table中的el-input限制只能输入正整数

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column label="成绩"><template slot-scope="scope"><el-inputv-model="scope.row.score"@input="scope.row.score = limitToPositiveInteger(scope.row.score)"size="small"></el-input></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ date: '2016-05-02', name: '张三', score: '' },{ date: '2016-05-04', name: '李四', score: '' },// ...],};},methods: {//把.replace(/^0+/, '')干掉首位就可以输入0limitToPositiveInteger(value) {// 限制只能输入正整数return value.replace(/[^\d]/g, '').replace(/^0+/, '');},},
};
</script>

(3)金额场景

el-input限制组件只能输入数字,且整数部分有两位或两位以上时第一位不能为 0,并且小数部分最多只能输入两位小数。(适用于输入金额场景)

<template><div><el-inputv-model="inputValue"@input="inputValue = handleInput(inputValue)"placeholder="请输入数字"></el-input><el-button @click="test">打印</el-button></div></template><script>export default {data() {return {inputValue: ''};},methods: {test(){console.log(this.inputValue)},handleInput(value) {// 允许输入整数或小数,且第一位不能为0,小数点后最多两位const regex = /^(?!0\d)\d*(\.\d{0,2})?$/;if (regex.test(value)) {return value;} else {// 如果不符合规则,尝试修复输入return value.replace(/[^0-9.]/g, '') // 移除非数字和小数点.replace(/(\..*)\./g, '$1') // 禁止多于一个小数点.replace(/^0+(\d)/, '$1') // 禁止整数部分多余的0.replace(/^(\d+)\.(\d{2}).*$/, '$1.$2'); // 限制小数点后两位}}}};</script>

(4)百分比

el-input 组件只能输入整数和小数,小数部分最多两位,且整数部分只能输入 0 到 100,并且当整数部分正好是 100 时不能输入小数(适用于百分比)

<template><div><el-inputv-model="inputValue"@input="inputValue = handleInput(inputValue)"placeholder="请输入0到100之间的数字,小数最多两位"></el-input></div></template><script>export default {data() {return {inputValue: ''};},methods: {handleInput(value) {// 检查输入值是否符合条件const regex = /^(100|[1-9]?\d)(\.\d{0,2})?$/;// 如果整数部分是100,不允许输入小数if (/^100(\.\d*)?$/.test(value)) {return '100';} // 如果输入符合条件,更新 inputValueelse if (regex.test(value)) {return value;} // 不符合条件时,修正输入值else {return value.replace(/[^0-9.]/g, '') // 移除非数字和小数点.replace(/(\..*)\./g, '$1') // 禁止多于一个小数点.replace(/^0+(\d)/, '$1') // 去掉前导0.replace(/^(\d{1,2})\.(\d{2}).*$/, '$1.$2') // 限制小数部分两位.replace(/^([1-9]\d?|0)(\.\d{0,2})?.*/, '$1$2'); // 限制整数部分在0-99之间}}}};</script>

(5)身份证校验

<template><div><el-inputv-model="inputValue"@input="inputValue = handleInput(inputValue)"placeholder="请输入18位身份证号码"maxlength="18"></el-input></div></template><script>export default {data() {return {inputValue: ''};},methods: {handleInput(value) {// 过滤掉非数字和非字母X/x字符let filteredValue = value.replace(/[^0-9xX]/g, '');// 如果长度超过18位则截断if (filteredValue.length > 18) {filteredValue = filteredValue.slice(0, 18);}// 确保前17位是数字,最后一位可以是数字或字母X/xif (/^\d{0,17}[0-9xX]$/.test(filteredValue)) {return filteredValue;} else {// 如果不符合规则,移除最后一个字符return value.slice(0, -1);}}}};</script>

(6)只能输入数字和小数(不限制小数位数)

<template><div><!-- 使用 @input="inputValue = handleInput(inputValue)" 的形式 --><el-inputv-model="inputValue"@input="inputValue = handleInput(inputValue)"placeholder="请输入数字或小数"clearable></el-input></div></template><script>export default {data() {return {inputValue: ''};},methods: {handleInput(value) {// 使用正则表达式匹配数字和小数点,不限制小数位数const reg = /^(\d+)(\.\d*)?$/;// 如果匹配正确,返回输入的值;否则返回一个空字符串(或其他默认值)if (reg.test(value) || value === '') {return value;} else {return '';  // 返回一个空字符串或者你想要的默认值}}}};</script>

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

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

相关文章

【时时三省】(C语言基础)函数介绍strncat

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 strncat 打印结果是hello wor 跟strcat不同的是他后面可以加一个参数 这个参数就是它可以根据后面的数字 来追加多少个字符 这个如果后面的参数改成10的话 就是打印hello world 不会跟strn…

Appium环境搭建、Appium连接真机

文章目录 一、安装Android SDK二、安装Appium-desktop三、安装Appium Inspector 一、安装Android SDK 首先需要安装jdk&#xff0c;这里就不演示安装jdk的过程了 SDK下载地址&#xff1a;Android SDK 下载 1、点击 Android SDK 下载 -> SKD Tools 2、选择对应的版本进行下…

诊断知识:NRC78(Response Pending)的回复时刻

文章目录 前言NRC78的使用场景客户需求解读Autosar Dcm中的定义工具链中的配置总结 前言 在项目开发过程中&#xff0c;客户变更需求&#xff0c;是关于NRC78的回复时间点的&#xff0c;该需求在Autosar Dem中也有对应的参数&#xff0c;DcmTimStrP2ServerAdjust&#xff08;针…

Cortex-A7:如何切换ARM和Thumb状态

0 参考资料 ARM Cortex-A(armV7)编程手册V4.0.pdf1 Cortex-A7&#xff1a;如何切换ARM和Thumb状态 1.1 Cortex-A7支持的指令集 Cortex-A7支持的指令集包括ARM指令集和Thumb-2&#xff08;ARM官方一般用Thumb表示&#xff09;指令集。 ARM指令集指令大小都是32位&#xff0c;…

CLion和Qt 联合开发环境配置教程(Windows和Linux版)

需要安装的工具CLion 和Qt CLion下载链接 :https://www.jetbrains.com.cn/clion/ 这个软件属于直接默认安装就行&#xff0c;很简单&#xff0c;不多做介绍了 Qt:https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ window 直接点exe Linux 先c…

【一种比较万能的方法删除磁盘里删除不了的文件】

一种比较万能的方法删除磁盘里删除不了的文件 只需要以下三步&#xff1a; 1、运行命令提示符&#xff08;以管理员身份打开&#xff09; 2、修复磁盘文件&#xff0c;运行命令 chkdsk 文件所在目录 /f 3、del 文件所在目录

手写Spring IOC-简易版

目录 项目结构entitydaoIUserDaoUserDaoImpl serviceIUserServiceUserServiceImpl ApplicationContext 配置文件初始化 IOC 容器RunApplication 注解初始化 IOC 容器BeanAutowired Reference 项目结构 entity User Data NoArgsConstructor AllArgsConstructor Accessors(chai…

计算DOTA文件的IOU

背景 在目标检测任务中&#xff0c;评估不同对象之间的重叠情况是至关重要的&#xff0c;而IOU&#xff08;Intersection Over Union&#xff09;是衡量这种重叠程度的重要指标。本文将介绍如何编写一个Python脚本&#xff0c;通过并行化处理DOTA格式的标注文件&#xff0c;统…

JDK17下,使用SHA1算法报Certificates do not conform to algorithm constraints错误

JDK17从17.0.5开始&#xff0c;默认不再允许使用SHA1算法&#xff0c;如果引用的jar包或代码里使用了SHA1算法&#xff0c;会报以下错误。 Caused by: javax.net.ssl.SSLHandshakeException: Certificates do not conform to algorithm constraintsat java.base/sun.security.…

演示:基于WPF的DrawingVisual开发的高刷新率示波器

一、目的&#xff1a;分享一个基于WPF的DrawingVisual开发的高刷新率示波器 二、效果演示 特此说明&#xff1a;由于Gif录制工具帧率不够&#xff0c;渲染60帧用了4.6秒&#xff0c;平均帧率在12Hz左右&#xff0c;所以展示效果不好&#xff0c;想要看好些的效果可以看文章下面…

python中堆的用法

Python 堆&#xff08;Headp&#xff09; Python中堆是一种基于二叉树存储的数据结构。 主要应用场景&#xff1a; 对一个序列数据的操作基于排序的操作场景&#xff0c;例如序列数据基于最大值最小值进行的操作。 堆的数据结构&#xff1a; Python 中堆是一颗平衡二叉树&am…

每日OJ题_牛客_集合_排序_C++_Java

目录 牛客_集合_排序 题目解析 C代码 Java代码 牛客_集合_排序 集合_牛客题霸_牛客网 (nowcoder.com) 题目解析 笔试题可直接用set排序&#xff0c;面试可询问是否要手写排序函数&#xff0c;如果要手写排序&#xff0c;推荐写快排。 C代码 #include <iostream> …

Redis中String类型数据扩容原理分析

大家好&#xff0c;我是 V 哥。在 Java 中&#xff0c;我们有动态数组ArrayList&#xff0c;当插入新元素空间不足时&#xff0c;会进行扩容&#xff0c;好奇 Redis 中的 String 类型&#xff0c;C 语言又是怎样的实现策略&#xff0c;带着疑问&#xff0c;咱们来了解一下。 最…

SOD-YOLOv8 - 增强YOLOv8以在交通场景中检测小目标

原文链接:中英文对照阅读 摘要 计算机视觉中的目标检测对于交通管理,紧急响应,自动驾驶车辆和智能城市至关重要。 尽管在目标检测上有重大进步,但在远程摄像头获取的图像中检测小目标仍具有挑战性,这主要是由于它们的大小、与摄像头的距离、形状的多样性和杂乱的背景所造…

集合框架07:LinkedList使用

1.视频链接&#xff1a;13.14 LinkedList使用_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p142.LinkedList集合的增删改查操作 package com.yundait.Demo01;im…

【判断推理】逻辑论证之归因论证

2.1 归因论证概述 归因&#xff1a;指人们对 他人或自己行为的原因的推论过程。具体而言&#xff0c;就是观察者对他人的行为过程或自己的行为过程所进行的因果解释和推论。&#xff08;通俗而言&#xff0c;归因就是对已经发生的事实&#xff0c;在众多可能的原因中找出一个原…

【大模型问答测试】大模型问答测试脚本实现(第二版)——接入pytest与代码解耦

背景 接上一篇&#xff0c;【大模型问答测试】大模型问答测试脚本实现&#xff08;第一版&#xff09;。 在实现自动化的时候&#xff0c;原先把很多方法与request请求写在一块了&#xff0c;趁着目前实现接口数量较少&#xff0c;决定对代码进行解耦&#xff0c;并且清晰目录…

Qt获取磁盘信息+表格显示

效果展示 主要代码 获取磁盘相关数据 获取磁盘数据 Qt 没有提供相关的接口&#xff0c;需要使用 Windows API。接口解释如下&#xff1a; BOOL GetDiskFreeSpaceExW([in, optional] LPCWSTR lpDirectoryName,[out, optional] PULARGE_INTEGER lpFreeBytesAvailable…

推荐算法的学习

文章目录 前言1、模型1.1 从本领域模型的发展历史中学习1.1.1 在历史中总结发展规律和趋势1.1.2 发现模型之间的共性&#xff0c;方便记忆 1.2 从其他领域的发展中学习1.2.1 注意力机制1.2.2 残差网络 1.3 实践该怎么办&#xff1f; 2、 特征2.1 数据源的选择与建立2.2 特征构造…

Python生成随机密码脚本

引言 在数字化时代&#xff0c;密码已成为我们保护个人信息和数据安全的重要手段。然而&#xff0c;手动创建复杂且难以猜测的密码是一项既繁琐又容易出错的任务。幸运的是&#xff0c;Python编程语言为我们提供了一种高效且灵活的方法来自动生成随机密码。本文将详细介绍如何…