vue 中的input
1. 限制小数位数1.1 Vue 限制input输入 小数点后两位number<input type="number" @keydown="keydownFn" placeholder="请输入价格" v-model="price">keydownFn(event) {// 通过正则过滤小数
·
1. 限制小数位数
1.1 Vue 限制input输入 小数点后两位number
<input type="number" @keydown="keydownFn" placeholder="请输入价格" v-model="price">
keydownFn(event) {
// 通过正则过滤小数点后两位
// event.target.value = (event.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null //只能为正数
event.target.value = (event.target.value.match(/\-?\d+\.?\d{0,1}/g)[0]) || null //可以为负数
},
1.2 Vue 限制input输入 小数点后一位number
<input type="number" @keydown="keydownFn" placeholder="请输入价格" v-model="price">
keydownFn(event){
const arr = event.target.value.split('.');
if(arr.length == 2 && arr[1].length > 1){ //有至少两位小数
event.target.value = arr[0] + '.' + arr[1].substr(0,1);
this.$message({
message: '只允许一位小数',
type: 'warning'
});
}else if(arr.length == 1){ //没有小数
event.target.value = arr[0]
}else if(arr.length == 2 && arr[1].length == 1){ //只有一位小数
event.target.value = arr[0] + '.' + arr[1];
}
},
2. 监听 oninput 事件无效(oninput 即 input的输入值变化事件)
2.1 常规写法 ===>> 无效; v-on:oninput也没有用
<input type="number" @oninput="keyInputFu" placeholder="请输入价格" v-model="price">
2.2 vue中的正确写法(v-on亦可)
<input type="number" @input="keyInputFu" placeholder="请输入价格" v-model="price">
3. 如果使用了UI框架,其input组件是否有 oninput / keydown 事件,需要看其框架中是否有定义(一般文档中有)。如果文档中没有,用了之后可能会没有用(当然,可以用 .native 修饰符试一试哦) ===>> 比如 Element
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!
更多推荐
已为社区贡献25条内容
所有评论(0)