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" 加上这个属性,是为了样式和以前保持一致

上一篇下一篇

猜你喜欢

热点阅读