itsource

입력 Vuej의 소수점 수 제한

mycopycode 2022. 8. 30. 22:28
반응형

입력 Vuej의 소수점 수 제한

입력 필드가 있으며 사용자가 입력해야 하는 소수점 수를 제한하고 싶습니다.예:(10.123), 더 입력하면 변경되지 않고 값이 그대로 유지됩니다.현재 사용자에게 오류가 발생하지만 충분하지 않습니다.PS. Vue-Bootstrap을 사용하고 있습니다.나는 이것을 시도하지만 소수점뿐만 아니라 전체 숫자를 제한한다.

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

보기만 해도 잘 작동합니다.

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

변수의 소수점을 제한하는 메서드를 호출할 수 있습니다.@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>

언급URL : https://stackoverflow.com/questions/59750692/limit-number-of-decimals-on-input-vuejs

반응형