限制el-input只能输入数字,且保留两位小数
时间: 2023-10-17 19:22:26 浏览: 119
vue + el-input 中 textarea 实现 placeholder 换行
你可以使用 Vue 的指令 v-model 和正则表达式来实现这个功能。具体步骤如下:
1. 在 el-input 上添加 v-model 指令,绑定一个数字类型的变量,例如:`<el-input v-model="price"></el-input>`
2. 监听 el-input 的输入事件 oninput,使用正则表达式过滤非数字和小数点,保留两位小数并更新绑定的变量,例如:
```
<el-input v-model="price" @input="handleInput"></el-input>
...
methods: {
handleInput(event) {
// 过滤非数字和小数点
let value = event.target.value.replace(/[^\d.]/g, '');
// 保留两位小数
value = value.replace(/^\./g, '');
value = value.replace(/\.{2,}/g, '.');
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
// 更新绑定的变量
this.price = value;
}
}
```
这样就可以限制 el-input 只能输入数字,且保留两位小数了。
阅读全文