Vue 小数部分不能直接显示0
2021-02-22 本文已影响0人
何喜同学
需求:输入框可以输入任意小数,最后获取的值是数值,比如可以输入 1.01
我们引入的element 框架,"element-ui": "^2.13.2"
以前HTML部分的写法
<el-input
v-model.number="money"
type="number"
></el-input>
v-model.numbe
可以使获取的值的类型是 Number ,
type="number" `` 是
但是这样写遇到一个问题,那就是小数后面不能输入 0 ,比如输入 1.0 ,输入框马上变为 1 ,想输入 1.101 也是不行的,因为输入 1.10 的时候,输入框就变化为 1.1 了,怎么解决小数末尾部分不能输入0的问题?
我百度无果,我去看 element 的 GitHub ,看关闭的 issue ,发现了答案,
这个确实是 element-ui 更新带来的问题,为了解决这个问题,引入了 InputNumber
这个组件,这个组件就能解决小数部分末尾不能正常显示0的问题
使用方法
<el-input-number
v-model="money"
type="number"
:controls="false"
></el-input-number>
使用变化
- <el-input
+ <el-input-number
- v-model.number="money"
- type="number"
+ :controls="false"
+ v-model="money"
- ></el-input>
+ ></el-input-number>
:controls="false"
加上这个属性,是为了样式和以前保持一致