限制输入Vuejs的小数位数

Question

我有一个输入字段，我想限制用户应输入的小数位数。例如：(10.123)，如果他输入更多，则不会进行任何更改，该值将保持不变。现在用户收到一个错误，但这还不够。附言。我正在使用 Vue-Bootstrap。我尝试这样做，但限制整数而不仅仅是小数。

<b-form-input
    type="number"
    id="contract-input"
    v-model="contract"
></b-form-input>

从视图上来看，效果很好。

<p>{{parseFloat(contract).toFixed(2)}}</p>

Answer 1

您可以调用一个方法来限制@input事件变量中的小数位数。
例子：

function callMe(){
    var vm = new Vue({
        el : '#root',
        data : {contract : ''},
        methods: {
          restrictDecimal () {
            this.contract=this.contract.match(/^\d+\.?\d{0,2}/);
          }
        }
    })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
  <h3>Restrict decimals in number</h3>
  <div>
    <input type='number' v-model='contract' @input="restrictDecimal">
    
    <b>{{contract}}</b>
    
  </div>
</div>