美文网首页
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

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