我们可以优先使用el-input-number标签
https://element.eleme.cn/#/zh-CN/component/input-number


支持很多属性可以到官网查看

也可以使用type=numbe和v-model.number属性,两者结合使用,能满足大多数需求,如果还不满足,可以再结合正则表达式过滤

<el-input v-model.number="value" type="number" />

el-input标签type=number或者v-model.number属性,可能也没有完全符合我们想要的结果,所以直接使用正则表达式过滤

<el-input v-model="height" placeholder="请输入" @input="handleEdit" />

el-input 只能输入正整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\d]/g, ""); // 只能输入数字value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入正整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/^(0+)|[^\d]+/g,''); // 以0开头或者输入非数字,会被替换成空value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入负整数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字value = value.replace(/^[1-9]/g, ""); // 不能以1-9开头value = value.replace(/\-{2,}/g, "-"); // -只能保留一个value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似value = value.replace(/^0+(\d)/, "0"); // 第一位0开头,0后面为数字,则过滤掉,取0value = value.replace(/(-\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入负整数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字value = value.replace(/^\d/g, ""); // 不能以数字开头value = value.replace(/\-{2,}/g, "-"); // -只能保留一个value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23value = value.replace(/(-)0+/g, "$1"); // 不能出现-0,-001,-0001类似value = value.replace(/(-\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入整数(包括正整数、负整数、0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字value = value.replace(/\-{2,}/g, "-"); // -只能保留一个value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-,不能出现类似-11-2,12-,11-23value = value.replace(/-(0+)/g, "0"); // 不能出现-0,-001,-0001类似value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(-?\d{15})\d*/, '$1') // 最多保留15位整数this.height = value
}

el-input 只能输入正小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\d.]/g, '') // 只能输入数字和.value = value.replace(/^\./g, '')  //第一个字符不能是.value = value.replace(/\.{2,}/g, '.') // 不能连续输入.value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height = value
}

el-input 只能输入负小数(包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d.]/g, ""); // 只能输入-和数字和.value = value.replace(/^[^\-0]/g, ""); // 只能-和0开头value = value.replace(/\-{2,}/g, "-"); // 不能连续输入-value = value.replace(/(-)\./g, "$1"); // -后面不能输入.value = value.replace(/\.{2,}/g, "."); // 不能连续输入.value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似value = value.replace(/^0+(\d|.)/, "0"); // 第一位0开头,0后面为数字或者.,则过滤掉,取0value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height = value
}

el-input 只能输入负小数(不包括0)

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d.]/g, ""); // 只能输入-和数字和.value = value.replace(/^[^\-]/g, ""); // 只能-开头value = value.replace(/\-{2,}/g, "-"); // 不能连续输入-value = value.replace(/(-)\./g, "$1"); // -后面不能输入.value = value.replace(/\.{2,}/g, "."); // 不能连续输入.value = value.replace(/(\.\d+)\./g, "$1"); // .后面不能再输入.value = value.replace(/(\d+|\.)-/g, "$1"); // 数字和.后面不能接-,不能出现类似11-, 12.-value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height = value
}

el-input 输入整数(包括正数、负数、0)和小数,保留15位整数和2位小数

// 在 Input 值改变时触发
handleEdit(e) {let value = e.replace(/[^\-\d.]/g, '') // 只能输入.和-和数字value = value.replace(/^\./g, '')  //第一个字符不能是.value = value.replace(/\.{2,}/g, '.') // 不能连续输入.value = value.replace(/(\.\d+)\./g, '$1') // .后面不能再输入.value = value.replace(/(-)\./g, '$1') // -后面不能输入.value = value.replace(/\-{2,}/g, '-') // -只能保留一个value = value.replace(/(\d+|\.)-/g, '$1') // 数字和.后面不能接-,不能出现类似11-, 12.-value = value.replace(/-(0){2,}/g, "$1") // 不能出现-00,-001,-0001类似value = value.replace(/(-)0+(\d+)/g, '$1$2') // 不能出现-01,-02类似value = value.replace(/^0+(\d)/, '$1') // 第一位0开头,0后面为数字,则过滤掉,取后面的数字value = value.replace(/(\d{15})\d*/, '$1') // 最多保留15位整数value = value.replace(/(\.\d{2})\d*/, '$1')// 最多保留2位小数this.height= value
}

$1表示匹配第一个括号里的内容,$2表示匹配第二个括号的内容,比如

value = value.replace(/(-)\./g, '$1') // 输入框输入-.就会替换成-
value = value.replace(/(-)(0{2,})/g, '$1$2') // 输入-00,-000,就会替换成-0

写得有点复杂,没办法,刚上手的正则表达式。如果配合el-input标签的type=number或者v-model.number属性,正则表达式部分也许不用写这么多而且复杂。有更简洁的方法请评论区留言
附上:
正则表达式 学习网址1
正则表达式 学习网址2
正则表达式在线测试网址

el-input 只能输入整数(包括正数、负数、0)或者只能输入整数(包括正数、负数、0)和小数相关推荐

  1. 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序

    /* 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序 */ import java.util.Scanner; class BreakExer {public stati ...

  2. 5.随机输入一个整数,判断输入的数是正数、负数还是0,如果是正数那么我们输出,”刚刚输入的一个正数”,如果是负数,那么我们输出,”刚刚输入的那个数是负数”,如果我们输入的0的话,那么我们出输,”刚刚输

    package com.javaprictic.homework; import java.util.Scanner; public class Test02 {     public static ...

  3. 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序。

    从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序. 题目描述: 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序. 解题思路: 因为读入的个数不 ...

  4. 键盘读入不定数量的整数,判断读入的正数和负数的个数,输入0时结束 while(true),for(;;)

    代码:(亲写有效)标注清晰 import java.util.Scanner; class dada{ public static void main(String[] args) {Scanner ...

  5. 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为0时结束程序。(题目类型:没有明确循环次数)

    import java.util.Scanner;/* 从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入 为0时结束程序.*/ public class ForWhileTest {pu ...

  6. 汇编实现两位数(包括负数)以内的输入,排序和输出

    ;2. 用户输入不少于5个, ;不多于30个的十进制整数 ;(含负数,绝对值小于100), ;排序后将结果输出. assume cs:code,ds:data,ss:stackdata segment ...

  7. 怎样用才c语言定义一个三位数,怎样编写一个c语言程序计算任意输入一个3位数的整数的各位数字之和。要求主函数包括输入输出和调用该函数。...

    点击查看怎样编写一个c语言程序计算任意输入一个3位数的整数的各位数字之和.要求主函数包括输入输出和调用该函数.具体信息 答:#include void main(){ int a,sum=0; pri ...

  8. 进制转换【最全进制转换汇总】(整数_小数_正数_负数)正负数整数小数十进制转任意进制-正负数整数小数任意进制转十进制-正负数低进制转高进制-正负数高进制转低进制

    文章目录: 补充知识点:各进制符号表示及其关系--二进制(B).八进制(O).十进制(D).十六进制(前缀OX,后缀H) 扩展:在线进制转换 第一部分:正数 一:[整数]正数十进制转任意进制:辗转相除 ...

  9. 限制input框只能输入数字,加减号也不可以输入

    例子:html代码 <input type="number" id="assetId" required name="assetId" ...

  10. Java黑皮书课后题第3章:**3.15(游戏:彩票)修改程序清单3-8,产生三位整数的彩票。程序提示用户输入一个三位整数,然后依照规则判定用户是否赢得奖金

    **3.15(游戏:彩票)修改程序清单3-8,产生三位整数的彩票.程序提示用户输入一个三位整数,然后依照规则判定用户是否赢得奖金 题目 题目概述 破题 代码 题目 题目概述 **3.15(游戏:彩票) ...

最新文章

  1. NSArray、NSMutableArray和NSMutableDictionary的用法
  2. zcmu2014(公式推导+二分)
  3. 使用vue-happy-scroll 自定义滚动条
  4. redis的Python接口调用
  5. hibernate注解的测试
  6. 从oracle里面取直,45个非常有用的 Oracle 查询语句小结
  7. Sql字符串函数(1)
  8. [你必须知道的.NET]第十四回:认识IL代码---从开始到现在
  9. Android权限管理原理,Android手机Root授权原理细节全解析
  10. 浅谈Fragment
  11. 渗透攻击exp共享站点
  12. 世界编程语言2008年初排行榜
  13. NC5.X系列单点登录
  14. Python——Scipy库
  15. 利用nginx实现内网地图瓦片代理
  16. php redis 搜索,一步步实现 Redis 搜索引擎
  17. Network Password Recovery工具查看windows凭据密码
  18. [题解]CodeForces1208G Polygons
  19. 封装Vue组件的原则及技巧
  20. 【应用篇】MyBatis学习笔记

热门文章

  1. Win10 Cortana 搜索框字体颜色
  2. 计算机专业的技能测试,中职学校计算机专业技能测试方法存在的主要问题及其对策...
  3. 云服务器如何创建快照?
  4. 计算机情绪识别属于什么方向,情绪识别
  5. python msproject_MS Project(*.mpp文件)到PowerBi
  6. Android 短视频SDK
  7. 树莓派自动饮水机编程示例
  8. [Idea] Add Abbreviation的使用
  9. win7系统64位系统怎么计算机配置,电脑装64位系统有什么要求|64位系统安装条件是什么...
  10. cannot resolve symbol 问题