金额输入框限制输入的金额

前言

做金融行业的难免会遇到输入金额的input，那就不可避免的要对输入的数字做限制，一般只能输入到小数点后两位。

实现方式

通过监听输入框的input事件获取到输入值，然后通过正则改变输入的值达到控制输入的目的。

代码实现

<template>
    <div>
        <input v-model="amount" @input="change" placeholder="请输入金额">
        <p>Message is: {{ amount }}</p>
    </div>
</template>

<script>
    export default {
        name:'input',
        data() {
            return {
                amount:''
            }
        },
        methods:{
            //监听input值改变
            change(event){
                //限制不能输入 00.11 的格式
                if (this.amount.split('')[0] == '0' && this.amount.split('')[1] != '.'){
                    this.amount = '0'
                    return;
                }
                //只能输入到小数点后两位
                this.amount = (event.target.value.toString().match(/^\d*(\.?\d{0,2})/g)[0])
            }
        }
    }
</script>
<style>
</style>