el-input设置max、min无效的解决方案
目录
一、方式1:type=“number”
二、方式2:oninput(推荐)
三、计算属性
如下表所示,下面为官方关于max,min的介绍:
el-input:
| max | 原生属性,设置最大值 |
| min | 原生属性,设置最小值 |
| step | 原生属性,设置输入字段的合法数字间隔 |
不用el-form表单来验证处理的情况下,举例了下面几种方式:
一、方式1:type=“number”
这两个,max和min主要是用于设置最大值和最小值的,但是呐,如果你只使用max及min是没有效果的,他必须和type=“number”配合使用,也就是说,在el-input中两者需要同时存在才有效果。
还有一个需要注意的是,el-input设置type="number",原本的样式会发生改变(下图所示)。
这种方式限制的是数字输入框右边的增减箭头按钮,最大值和最小值,不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数,还是无法限制。
<el-input type="number" v-model="queryParams.itemName" max="100" min="0" value="" placeholder="请输入" clearable/>

这个和el-input-number有点类似:
| min | 设置计数器允许的最小值 | number | — | -Infinity |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |

el-input-number可以键盘打字输入是限制为number类型,
el-input对键盘打字输入是限制不住的。
注意:
el-input设置type="number"后,输入“e”也能够输入。这是因为自然常数e=2.71828,这个e会被type=”number”判定为合规,不会进入正则。
二、方式2:oninput(推荐)
oninput事件会在表单元素的值发生变化时立刻触发,无论是通过键盘输入、粘贴、剪切、拖拽等方式,都能实时响应。
主要用于实时监控表单元素的输入,特别是一些需要动态展示输入内容的场景
下方是只能输入1-100数字的案例:
<el-input v-model.number="scope.row.obj.superFreshPercentage" oninput="if(value){value=value.replace(/[^\d]/g,1);if(Number(value)<=0){value=0}} if(Number(value)>100){value=100}" size="mini" placeholder="输入(1-100)" clearable />
不使用onchange事件的原因:
在表单元素的值发生变化并且元素失去焦点时触发,他主要适用于需要在表单元素失去焦点时进行处理的场景
三、计算属性
使用v-model和计算属性的完整使用更新输入的值
<template> <el-input v-model="boundedValue" placeholder="请输入数字" type="number" ></el-input> <el-alert v-if="showError" type="error" description="输入的数字超出了范围" show-icon ></el-alert>
</template> <script>
export default { data() { return { inputValue: null, minValue: 0, maxValue: 100, showError: false }; }, computed: { boundedValue: { get() { return this.inputValue; }, set(value) { const numValue = Number(value); if (!isNaN(numValue) && numValue >= this.minValue && numValue <= this.maxValue) { this.inputValue = numValue; this.showError = false; } else { this.inputValue = Math.max(this.minValue, Math.min(this.maxValue, numValue)); this.showError = true; } } } }
};
</script>
希望对大家有所帮助
相关文章:
el-input设置max、min无效的解决方案
目录 一、方式1:type“number” 二、方式2:oninput(推荐) 三、计算属性 如下表所示,下面为官方关于max,min的介绍: el-input: max原生属性,设置最大值min原生属性&a…...
C语言经典面试题目(十八)
1、如何在C语言中实现堆排序算法? 堆排序是一种利用堆数据结构进行排序的算法。它的基本思想是首先将待排序的数组构建成一个最大堆(或最小堆),然后逐步将堆顶元素与堆中最后一个元素交换,并重新调整堆,使…...
[数据集][目标检测]零售柜零食检测数据集VOC+YOLO格式5422张113类
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):5422 标注数量(xml文件个数):5422 标注数量(txt文件个数):5422 标注…...
Flask vs. Django:选择适合你的Web开发框架【第134篇—Flask vs. Django】
👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Flask vs. Django:选择适合你的Web开发框架 在选择一个适合你项目的Web开发框架…...
你能解释一下Spring AOP(面向切面编程)的概念和用法吗?在Spring中,如何使用事务管理?
你能解释一下Spring AOP(面向切面编程)的概念和用法吗? Spring AOP(面向切面编程)是Spring框架中一个非常重要的功能模块,它允许开发者通过预编译方式和运行期动态代理来实现程序功能的统一维护。AOP并不是…...
时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解
时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现GWO-CEEMDAN基于灰狼算法优化CEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.CEEMDAN方法的分解效果取决于白噪声幅值权重(Nstd)和噪声添…...
Spring Boot(七十):利用Jasypt对数据库连接进行加密
1 Jasypt简介 Jasypt(Java Simplified Encryption)是一个专注于简化Java加密操作的工具。它提供了一种简单而强大的方式来处理数据的加密和解密,使开发者能够轻松地保护应用程序中的敏感信息,如数据库密码、API密钥等。 Jasypt的设计理念是简化加密操作,使其对开发者更加…...
Mysql设计规范
主键推荐默认用递增字符串大小合理设置数据库默认字段: 主键、创建人、创建时间、修改人、修改时间、逻辑删除(可选)、乐观锁(可选)冗余字段: 严禁冗余变更字段;例如: 创建人名称,租…...
Vue3项目部署安装
Vue3ts部署 查看官网安装项目vue3的命令(四个)其中有: yarn create vuelatest 我执行时遇到报错,可能是我yarn版本不是最新 的问题, 改用这个命令去掉latest即可 yarn create vue 新项目先要安装yarn依赖,才能yarn …...
Oracle P6 Professional 配置连接数据库总结
前言 P6 Professional作为Oracle P6计划管理系统的重要套件之一,其操作出色,体检佳,是非常多的计划工程师跟踪项目进度计划的辅助工具。自20年前,Professional一直在不断的演变更新,以适应当前的新技术,从…...
WPF —— Grid网格布局
1 :Grid网格布局简介 Grid为WPF中最常用的布局容器, 作为View中的主要组成部分, 负责框架中整体的页面布局。 2:网格标签Grid.ColumnDef Grid.ColumnDefinitions自定义列 只能设置宽度 不能设置高度ColumnDefinition 每一个列可以设置宽度,…...
爬虫的去重
去重基本原理 爬虫中什么业务需要使用去重 防止发出重复的请求防止存储重复的数据 在爬取网页数据时,避免对同一URL发起重复的请求,这样可以减少不必要的网络流量和服务器压力,提高爬虫的效率,在将爬取到的数据存储到数据库或其…...
elementUI两个select单选框联动
实现需求:两个单选框内容两栋,在选择第一个时,第二个选框能自动更新对应选项。且在切换第一个选项内容时,第二个选框会被清空且切换到新的对应选项。 设置值班班次和备班情况两个选项 ,完整代码如下: <…...
十四、GPT
在GPT-1之前,传统的 NLP 模型往往使用大量的数据对有监督的模型进行任务相关的模型训练,但是这种有监督学习的任务存在两个缺点:预训练语言模型之GPT 需要大量的标注数据,高质量的标注数据往往很难获得,因为在很多任务…...
五款优秀的FTP工具
一、WinSCP WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议。它的主要功能就是在本地与远程计算机间安全的复制文件。.winscp也可以链接其他系统,比如linux系统。 官网:https://winscp.net/ 二、FileZilla FileZilla是一个免费开源的…...
十八、软考-系统架构设计师笔记-真题解析-2022年真题
软考-系统架构设计师-2022年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.云计算服务体系结构如下图所示,图中①、②、③分别与SaaS、PaaS、IaaS相对应,图中①、②、③应为( )。 A.应用层、基础设施层、平台层 B.应用层、平台层、基础设施层 C.平…...
oracle数据库名、实例名、服务名等区分
DB_NAME: ①是数据库名,长度不能超过8个字符,记录在datafile、redolog和control file中 ②在DataGuard环境中DB_NAME相同而DB_UNIQUE_NAME不同 ③在RAC环境中,各个节点的DB_NAME 都相同,但是INSTANCE_NAME不同 ④DB_NA…...
MQ横向对比:RocketMQ、Kafka、RabbitMQ、ActiveMQ、ZeroMQ
前言 本文将从多个角度全方位对比目前比较常用的几个MQ: RocketMQKafkaRabbitMQActiveMQZeroMQ将单独说明。 表格对比 特性RocketMQKafkaRabbitMQActiveMQ单机吞吐量10 万级,支撑高吞吐10 几万级,吞吐量非常高,甚至有文献称&a…...
html5cssjs代码 018颜色表
html5&css&js代码 018颜色表 一、代码二、效果三、解释 这段代码展示了一个基本的颜色表,方便参考使用,同时也应用了各种样式应用方式。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><title>编程笔记…...
力扣刷题Days20-151. 反转字符串中的单词(js)
目录 1,题目 2,代码 1,利用js函数 2,双指针 3,双指针加队列 3,学习与总结 1,正则表达式 / \s /: 2,结合使用 split 和正则表达式: 1,题目 给你一个字符串 s &am…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
