반응형
입력 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
반응형
'itsource' 카테고리의 다른 글
목록의 초기 렌더링에 있는 목록 항목(스태거)에 애니메이션을 적용합니다. (0) | 2022.08.30 |
---|---|
메서드 --> 액션 --> 변환 --> 상태 문제 (0) | 2022.08.30 |
VueJs에서 특정 경로 데이터를 경로 이름으로 가져오려면 어떻게 해야 합니까? (0) | 2022.08.30 |
문자열을 UTF-8로 인코딩 (0) | 2022.08.30 |
변수를 기반으로 이벤트를 프로그래밍 방식으로 추가하려면 어떻게 해야 합니까? (0) | 2022.08.29 |