VueJS v-model 自动将输入框获取的字符串转换为数字

更新日期: 2020-03-02 阅读次数: 1838 字数: 152 分类: VueJS

JS 的类型转换容易出现 bug

html input 输入框即便指定 type="number",也经常出现 v-model 获取到的值为字符串的情况。

于是就出现了,在数值计算逻辑中,数字与字符串相加的情况。

> 100 + "2.35"
"1002.35"

而我们预期的是:

100 + 2.35
102.35

在钱相关的计算中,这非常危险。

所以,不得不使用 parseFloat() 或者 Number() 对字符串进行转换。

VueJS 自动转换

<input v-model.number="price" type="number">

这样就方便多了。

类似的功能还有 v-model.trim。

参考

https://vuejs.org/v2/guide/forms.html#number

爱评论不评论

近期节日

2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
2020年06月30日 世界青年联欢节
2020年07月01日 中国共产党诞生日
查看更多节日