VUE el-input输入数字 比较数值大小 踩坑

最新推荐文章于 2023-12-01 10:34:31 发布
最新推荐文章于 2023-12-01 10:34:31 发布
阅读量656 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maxueyingying/article/details/131825923
版权

在这里插入图片描述
需求 ：比较 Forcast Qty和 qty的值

当qty<=stockCount,点击提交按钮，弹提示框提示不可提交信息，
当qty>stockCount,点击提交按钮，提交信息

很简单一个需求，哈哈 立马写出来，测试结果发现 当qty>stockCount,还是走不可提交信息这一步，
在这里插入图片描述

打印结果

console.log(row.qty, row.stockCount, row.qty <= row.stockCount)

在这里插入图片描述
在这里插入图片描述
这就很奇怪了 很明显 126 是大于23的，但 row.qty <= row.stockCount 为什么为true，
而qty为256 ，stockCount 为23，打印结果又是正确的，一直觉得是不是数据存在缓存，也试了强制刷新数据的功能，也没解决问题。

最后 发现。qty，stockCount都为字符串 ，不能进行比较，必须转换为number类型进行比较

修改前代码

在这里插入图片描述

故：修改后的代码 将两个字段都转化为number类型后在进行数值比较

在这里插入图片描述

蓝胖子的多啦A梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 两个input框设置结束时间大于开始时间
weixin_45502613的博客
12-11 1045
1.效果图 2. :picker-options=“pickerOptions0” 控制变量 <el-form-item label="开始时间"> <el-date-picker v-model="customerModel.usedrogeStartime" type="datetime" value-format="yyyy-MM-dd h...
input change获取改变之前的值和改变之后的值_Vue使用watch 监听新旧值一样？
weixin_39657300的博客
11-25 1万+
最近写搜索功能时，为了代码简洁(偷懒)，把搜索结果字段写在一个对象中，然后使用watch 深度监听，烦是对象发生改变了就调用后端接口后端最新的搜索结果。本身是没有问题的，但是之后发现凡是 input 框发生改变时，就会调用后端接口。如果用户打字速度过快的话，有可能出现用户之前搜索到的结果覆盖最新的结果(假设用户打了五个字，并且该用户打字速度挺快的，当用户打完5个字之后，并且拿到了返回的结果，但是请...
el-input 限制最大值最小值（亲测有效）
热门推荐
m0_67401935的博客
03-08 1万+
业务需求中，我们经常会遇到输入框的限制数字范围的需求，max，min属性并不行。可以试试这个方法： 代码： <el-form-item label="开始积分" prop="startScore"> <el-input type="number" max="5" min="0" @input="numberChange(arguments[0],5)" @change="numbe
vue.js element el-table 里 el-input 数据校验，比较两列
04-05 2868
场景，换购价不能超过售价。网上搜到的一般都是用form对内容进行简单校验，比如不为空，长度等，不能进行数据比较之类的操作。 <el-table :data="curHomePageExchangeGoodsList" stripe :row-style="{height:0+'px'}" :cell-style="{padding...
el-input输入框要求校验后一个输入框的值大于前一个输入框的值
m0_49017085的博客
09-19 2251
要求实现以下校验： 需要一个表单，里面是六个连续的区间，左闭右开，所以要求后一输入框输入的数值必须大于前一输入框的数值这一部分放在与data中的return同级 这一部分放在return里面就是正常的rules写法 validator对应的名称与上面var的名称一致
el-form检验input数据类型和大小
yan_hai_的博客
08-24 725
一般经常会遇到输入框需要输入数字，并且数值大小在什么范围 <el-form-item label="首页排序：" prop="sortNo"> <el-col :span="5"> <el-input v-model.number="formObj.sortNo" onblur="this.value=this.value.replace(/\D/g,'')" type="Number" placeholder="排序" />
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-input-tag：Vue.js 2.0输入标签组件
02-06
import InputTag from 'vue-input-tag' Vue . component ( 'input-tag' , InputTag ) CDN < script src =" https://unpkg.com/vue " > </ script > < script src =" ...
vue-currency-input:轻松输入Vue.js的货币格式数字
04-28
Vue货币输入 Vue货币输入插件可轻松输入货币格式的数字。 它提供了一个独立的...npm install vue-currency-input # OR yarn add vue-currency-input 在您的main.js添加Vue插件： import Vue from 'vue' import V
el-input框验证正整数及数字大小
weixin_46886491的博客
03-16 1500
el-input输入框只能输入正整数 <el-input size="mini" v-model="dayu" placeholder="到期天数大于" oninput="if(value > 999 || value < 0 ){value = ''}" onkeyup="value=value.replace(/[^\d]/g,'');" ></el-input>
使用Vue.js实现判断数值大小
CC763的博客
08-03 6773
1、效果：实现按钮获取随机值，并判断如果message>1则输出 Not Sorry ；如果message<1 则输出 Sorry 2、代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <!-- 实现按钮获取随机值，并判断如果message
在vue3中使用el-table实现新旧数据对比
最新发布
m0_65377849的博客
12-01 1184
【代码】在vue3中使用el-table实现新旧数据对比。
Vue.js比较两数大小
Alphamilk的博客
07-23 1521
【代码】Vue.js比较两数大小。
element ui 表格中可编辑的两数字列计算el-input-number，el-input-number加减号没反应
m0_51501174的博客
09-15 6288
3列的值是1列乘以2列计算得出的，并且1列和2列必须是正整数 首先想到的是下图这种办法，用v-model.number 加校验，只要输入的是字符就会被替换成''空字符串， 但这种方法在用户点击字符键盘后输入的内容就会被替换成空字符，无法做后面的计算处理 后来改成type="number",这种做法虽然很好的处理了用户输入字符键盘的情况，但可以输入小数点，要求是必须是正整数。 el-input-number完美的处理了我的需求 :min是可输入的最小值 :max是可输入的最大值，.
el-input限制只输入数字,elment后一个输入框大于第一个输入框值,elment两个表单关联
weixin_51565477的博客
08-11 1964
template <el-row :gutter="14" style="display: flex"> <el-form-item label="发送对象" prop="startObj"> <el-input v-model="bulletin.startObj" type="number" style="width:100px" /> </el-form-item>...
vue使用计算属性计算两个input的值
weixin_40923558的博客
10-12 1482
vue使用计算属性计算两个input的值
el-input 值为数字时rule提示不正确问题
brighthuacon的专栏
12-27 1038
el-input 值为数字时rule提示不正确问题
html比较两个数大小,Vue练习二十二：03_04_输入2个数字比较大小
weixin_39759995的博客
06-07 3418
Demo 在线地址：https://sx00xs.github.io/test/22/index.html---------------------------------------------------------------ide: vscode文件格式：.vue解析：(待补)vs{{which}}export default {data:function(){return{num1:''...
vue el-input 只能输入数字
02-06
在 Vue.js 中使用 el-input 时，如果你想要限制只能输入数字，可以在 el-input 组件上使用 type 属性，将其设置为 "number"。 例如： ``` <el-input type="number" v-model="numberValue"></el-input> export...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值