javascript - 限制输入 Vuejs 的小数位数

Question

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

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

在 View 中它工作正常。

<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>