input 세 자릿수마다 쉼표 찍기

질문 : vue.js 에서 input에 v-model이 선언되어 있는데 해당 input에 키가 입력되면 숫자만 입력이 되고 그 숫자가 입력 될 때 마다 세자리수에 , 를 찍어주려면?

Vue.js에서 입력된 숫자를 숫자만 입력되도록 필터링하고, 세 자릿수마다 쉼표를 찍어주는 방법은 아래와 같이 할 수 있습니다:

vue
<template>
  <div>
    <input type="text" v-model="formattedNumber" @input="formatInput">
  </div>
</template>

<script>
export default {
  data() {
    return {
      formattedNumber: ''
    };
  },
  methods: {
    formatInput() {
      this.formattedNumber = this.formattedNumber.replace(/[^0-9]/g, ''); // 숫자만 남기기
      this.formattedNumber = this.addCommas(this.formattedNumber); // 세 자릿수마다 쉼표 추가
    },
    addCommas(value) {
      return parseFloat(value)
        .toLocaleString('en-US', {
          minimumFractionDigits: 0,
          maximumFractionDigits: 0
        });
    }
  }
};
</script>

위의 코드에서는 다음과 같은 절차로 동작합니다:

1. v-model을 사용하여 입력된 값을 formattedNumber에 바인딩합니다.
2. @input 이벤트를 사용하여 입력할 때마다 formatInput 메서드를 호출합니다.
3. formatInput 메서드 내에서는 먼저 입력된 값에서 숫자만 남기도록 정규식을 사용합니다.
4. addCommas 메서드를 사용하여 세 자릿수마다 쉼표를 추가합니다. 이때 toLocaleString 함수를 사용하여 숫자 포맷팅을 수행합니다.
5. 최종적으로 formattedNumber에 정리된 값이 바인딩되어 화면에 표시됩니다.

위의 코드를 사용하면 사용자가 입력한 숫자가 숫자만 입력되고, 입력할 때마다 세 자릿수마다 쉼표가 추가된 상태로 표시됩니다.