Vue 限制input输入 保留两位小数或者多位
在就是实际业务需求开发中,经常需要用户输入输入框的值要进行保留小数操作,利用失焦事件可以在用户失焦的时候对输入的值进行格式化,保留固定的小数点后几位。
直接上代码
// html
<el-input v-model="row.settlementRatio" @blur="handleInput1" type="number" size="small" placeholder="请输入"></el-input>
<el-input v-model="row.settlementRatio" @blur="handleInput2" type="number" size="small" placeholder="请输入"></el-input>
data() {
return {
row {
settlementRatio: ''
}
}
}
methods: {
handleInput1(e) {
// 通过正则过滤小数点后四位 d{0,4} 4就代表保留四位小数
row.settlementRatio = (e.target.value.match(/^\d*(\.?\d{0,4})/g)[0]) || null
},
handleInput2(e) {
// 通过正则过滤小数点后四位 d{0,2} 2就代表保留四位小数
row.settlementRatio = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
},
}
也就是在失焦事件里面把值强行通过正则保留几位小数.