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

 

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

Logo

前往低代码交流专区

更多推荐