el-input-number 默认值设置失效

最新推荐文章于 2024-03-14 10:21:51 发布
最新推荐文章于 2024-03-14 10:21:51 发布
阅读量3.3k 收藏 1
点赞数 5
分类专栏： elenment 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu961691590/article/details/119892713
版权

 今天需要设置一个计数器在默认情况下是没有值的，有最大值和最小值。在百度上找的答案基本是通过绑定v-model的值为undefined，不知道为什么我这里没有效果，在尝试最简单的计数器下通过v-model绑定也没有成功。在前端的帮助下，通过在el-input-number中设置:min=null实现了默认值是没有值的，因为百度搜的答案都没有解决这种情况的问题，特此记录下来，希望能帮到更多人。

下面是代码和效果图：

        

 

 

大黄瓜de冬天
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue-number-input:Vue.js的数字输入组件
04-10
提示号码输入 Vue 3的数字输入组件。 主要档案 dist/ ├── vue-number-input.js (UMD, default) ├── vue-number-input.min.js (UMD, compressed) ├── vue-number-input.esm.js (ECMAScript Module) └── vue-number-input.esm.min.js (ECMAScript Module, compressed) 入门 安装 npm install vue @chenfengyuan/vue-number-input 在浏览器中： < script src =" /path/to/vue.js " > </ script > <!-- Vue.js is required --> < script src ="
element input-number 默认值设置为空
02-26
element input-number 当值传入的为''时，默认显示为0，有些情况我们不希望显示0，而是显示为空，针对这种情况我们对element input-number的源码做了兼容处理
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 1594
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
Element inputNumber输入框初始化没值为0问题
专注前端技术，包括Web端、移动端、小程序、APP
12-23 3284
昨天测试小姐姐找到我说，在数字输入框内输入值的时候要先删了零才能再输入比较麻烦，所以看怎么处理一下。 看到这个问题，第一想法就是在输入框聚焦的时候处理这个值的问题，因为后端返回是null，所以这个数字输入框的属性就是转换为了零。 处理办法： 给输入框绑定 @focus 事件，接着将输入框的model传给函数，在函数内判断。接着给model赋值为undefined即可。 <el-input-number size="mini" v-model="item.addScore" :key=
【element】InputNumber计数器 动态渲染设置默认值后加减号失效问题
weixin_48835514的博客
03-17 1342
今天同事遇到了一个问题，遍历一个数组，在页面上渲染n个计数器，计数器的初始值为0。 上图为el-input绑定的值。 一开始是直接赋值，结果导致加减号失效。后来百度后发现需要使用this.￥set，至于为什么需要使用this.￥set（哎，我打不出英文￥符了），先码篇文章，以后有空再看。https://blog.csdn.net/XuM222222/article/details/99942522 ...
为什么input中的maxlength属性失效了
猿小白的博客
10-24 1万+
今天在遇到限制某个输入框的最大长度的需求，比如一个要求输入手机号的输入框：当时我是这样写的 <input type="text" placeholder="请输入手机号码" maxlength="11" /> 如果是上面的这种写法的话，maxlength属性是有效的。但是type=”text”有一个不好的体验，就是获取焦点后弹出的输入法是默认拼音的那种，不太适合此处要求纯数字的需...
element ui组件赋值后部分组件修改数值无效情况解决
weixin_42192467的博客
06-28 2397
在使用过程中发现el-input-number无法输入，在网上搜资料，最终找到解决办法是在el-input-number上绑定@change=”changeVal($event)”
element el-input输入框绑定值无法修改原因
weixin_55798503的博客
09-16 2564
大家多多指教
element的el-input-number的默认值的问题
热门推荐
Cainannan1995的博客
03-18 1万+
el-input-number默认值为0 的问题 很多时候我们需要用到el-input-number来限制输入框智能输入数字，例如价格之类的，但是用了e l-input-numer的时候把默认值设为空和null都不生效，默认的值仍然显示0 <el-input-number :controls="false" :precision="2" :min="0" :max="100000000" v-model="price" ></el-input-number> data(){ ret
el-input-number 组件无法修改默认值为空
s_156的博客
03-16 877
当num设置为 null 或者 “” 都不能将输入框的值变为空。后来发现 将num 设置为 undefined。
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
node-v10.22.0-darwin-x64.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于JAVA的物流管理系统的源码设计与实现.zip
05-03
毕业设计-->物流管理系统的设计与实现（Java版本） 采用Struts2+hibernate+Oracle10g+Tomcat 涉及车辆管理，配送点管理，运输方式管理，订单管理，员工管理，用户管理，部门管理，权限管理，角色管理等基础管理功能。
基于VB+access实现的成绩分析统计系统(论文+源代码).zip
05-03
基于VB+access实现的成绩分析统计系统(论文+源代码) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
node-v10.14.2-linux-x64.tar.xz
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
ASP+ACCESS网上购物系统设计(源代码+设计说明书+调研报告).zip
05-03
ASP+ACCESS网上购物系统设计(源代码+设计说明书+调研报告).zip
el-input-number默认值怎么设置
07-27
el-input-number的默认值可以通过将v-model绑定的值设置为null或undefined来实现。例如，可以将v-model绑定的值设置为null来显示允许输入的最小值。在data中，可以将formData中对应的属性设置为null或undefined。例如： ```html <el-input-number v-model="formData.idx" :precision="0" :step="1" :min="1" :max="100000"></el-input-number> <el-input-number v-model="formData.winnersNum" :precision="0" :step="1" :min="1" :max="500"></el-input-number> ``` ```javascript data() { return { formData: { idx: null, winnersNum: null } } } ``` 另外，也可以将v-model绑定的值设置为undefined来实现默认值为空。例如： ```html <el-input-number v-model="formData.idx" :precision="0" :step="1" :min="null" :max="100000"></el-input-number> <el-input-number v-model="formData.winnersNum" :precision="0" :step="1" :min="null" :max="500"></el-input-number> ``` ```javascript data() { return { formData: { idx: undefined, winnersNum: undefined } } } ``` 这样设置后，el-input-number的默认值就会显示为允许输入的最小值，而不是空值。 #### 引用[.reference_title] - *1* *3* [element-ui 的 el-input-number的默认值设置为空](https://blog.csdn.net/HH18700418030/article/details/128466407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-input-number 默认值设置失效](https://blog.csdn.net/hu961691590/article/details/119892713)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值