首页 前端知识 使用v-model.number遇到的问题(小数点后边无法输入0)

使用v-model.number遇到的问题(小数点后边无法输入0)

2024-01-25 11:01:22 前端知识 前端哥 36 731 我要收藏

问题:用户在输入金额的时候发现输入不上0.04,后来在用户提出这个问题后我发现,输入的数字中只要小数点后边带有0的都输入不上,例如:1.023、5.2306、8.2405。

开发环境:vue + elementui

使用v-model.number的原因:在el-input的输入框中我限制了输入框的type="number",致使用户只能输入数字,不能输入其他还有字符的情况,但是在获取这个变量时,获取的却是字符串类型,因此需要类型转换,使用v-model.number后,可以避免这个问题,但是紧接着也迎来了新的问题。

<el-form-item label="总合同额(元)" :label-width="formLabelWidth">
	<el-input type="number" v-model.number="qkListform.zhte" disabled placeholder="请输入项目总合同额" ></el-input>
</el-form-item>

我在网上找了很多文章和资料,都没有发现有明确解决这个问题的方法,在此我列举几项我的解决思路,大家如果有好的解决方法也可以在评论区告诉我。

方法一:使用parseFloat()进行类型转换

将v-model.number改成v-model,在获取数据的时候需要手动转换下,比如上文中我的变量获取需要改写成parseFloat(this.qkListform.zhte),这样就可以了,如果需要判断下用户如果不输入需要默认更改成0,可以使用三目判断:this.qkListform.zhte ? parseFloat(this.qkListform.zhte) : 0

方法二:设置css样式

经过测试发现,如果将el-input标签更改成原生的input标签,则不存在小数点后边0输入不上的问题,此时需要在css文件中设置input输入框的样式,将input设置为el-input一样的样式即可,就可以避免这个问题

方法三:输入方式更改

其实这个也不能算是一种解决方法,只是这样输入小数点后边可以输入0,大家可以测试一下,比如输入0.04,在输入框中可以先输入0.4,在将光标移到4的前边输入0,这样也算是可以解决这个问题,但这个方案还是要看系统面向的用户

方法四:直接去掉.number

这里就需要测试了,看看你直接输入v-model获取的数字值你是否可以直接使用,比如说保存的时候需要将数据传递到数据库中是否可以直接存取,报不报错,如果不报错的话直接去掉.number就可以了,不需要改其他地方

我在项目中是使用了方法一和方法四,但是为了避免出现其他的问题,我还是建议大家在解决过程中可以使用方法一和方法二。

大家如果有更好的解决方案,欢迎在评论区中说出你的思路,后期如果有更好的解决方法,我也会及时更新的。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/343.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!