美文网首页
Vue 小数部分不能直接显示0

Vue 小数部分不能直接显示0

作者: 何喜同学 | 来源:发表于2021-02-22 16:14 被阅读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" 加上这个属性,是为了样式和以前保持一致

相关文章

  • Vue 小数部分不能直接显示0

    需求:输入框可以输入任意小数,最后获取的值是数值,比如可以输入 1.01 我们引入的element 框架,"ele...

  • 产品需要的数据显示格式。。。

    如果是整数直接显示整数,如果是小数直接显示小数,(但是要999,999,999,999.00这种格式) 数据可以这...

  • 输入框input只能输入数字和小数点

    只允许输入数字(整数:小数点不能输入) 允许输入小数(两位小数) 允许输入小数(一位小数) 开头不能为0,且不能输入小数

  • 输入框input只能输入数字和小数点

    只允许输入数字(整数:小数点不能输入) 允许输入小数(两位小数) 允许输入小数(一位小数) 开头不能为0,且不能输入小数

  • 新奇的课堂第四十天

    今天我们的数学开新课了,讲的是《小数点》小数点左边的部分是整数部分,小数点右边的部分是小数部分.小数末尾添上0或去...

  • iOS小数取整(四舍五入-向上-向下取值)

    小数向上取整,指小数部分直接进1: x = 2.222,ceilf(x) = 3。 小数向下取整,指直接去掉小数部...

  • 自定义格式

    多种写法 一、三段式 大于0,显示正数,带一位小数并带千分号小于0显示负数,两位小数等于0就显示 0.0% 第三段...

  • 取整

    小数向上取整,指小数部分直接进1 x=3.14,ceilf(x)=4小数向下取整,指直接去掉...

  • Python中float强制转换为int

    不圆整,直接截取整数部分,舍去小数部分

  • 数字处理

    有时候需要显示数字,但是小数点后面如果是0就不显示 显示人民币价格 显示不带小数点的格式化数字

网友评论

      本文标题:Vue 小数部分不能直接显示0

      本文链接:https://www.haomeiwen.com/subject/ozfkfltx.html