場景：
–要求1：輸入框只能輸入數字，可以使正數、負數、0，小數點最多保留兩位。
–要求2：不需要自動補齊小數點，也不需要自動四舍五入。

element-ui的數字輸入框el-input-number只能滿足要求1，所以在原有的基礎上做修改即可；
下圖的第一個輸入框就是沒改動的數字輸入框；第二個是修改后的滿足需求1和需求2；

以下代碼可以直接復制使用！

<template><div><!-- 默認數字輸入會自動補齊小數點 還會自動四舍五入 --><el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正負數 最多兩位小數"></el-input-number><!-- 去掉加減按鈕 去掉自動補齊小數點屬性precision 去掉四舍五入 --><el-input-number v-model="num6" :step="0.01" placeholder="0正負數 最多兩位小數" class="num_input" @input.native="changeInputPt2($event)"></el-input-number></div> </template><script> export default {data () {return {num5: undefined,num6: undefined}},methods: {changeInputPt2 (e) {console.log(e.target.value)if ((e.target.value.indexOf('.') >= 0)) {e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3) // 這里采用截取 既可以限制第三位小數輸入 也解決了數字輸入框默認四舍五入問題}console.log(e.target.value)}} } </script><style lang="less" scoped> .num_input {/deep/.el-input-number__decrease,/deep/.el-input-number__increase {display: none !important;}/deep/.el-input__inner {padding: 0 !important;} } </style>

總結

以上是生活随笔為你收集整理的输入框限制只能输入数字，正数、负数、0，最多两位小数；数字输入框可以输入负数，并最多保留两位小数；el-number-input去掉四舍五入和自动补齐小数；的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。