Vue.js로 Input 요소에 천 단위 콤마 추가하기

by

Vue.js를 사용하여 사용자가 입력한 금액을 천 단위 콤마(,)로 포맷팅하여 표시하는 방법에 대해 알아보겠습니다. 이것은 금융 애플리케이션 또는 어떤 종류의 숫자 입력 필드에서 유용합니다.



Input 요소와 데이터 모델

Vue 컴포넌트에서 천 단위 콤마를 추가하려면 다음과 같이 입력 요소와 데이터 모델을 설정합니다.

<template>
  <div>
    <label for="amount">금액 입력:</label>
    <input type="text" id="amount" v-model="formattedAmount" @input="formatInput" />
  </div>
</template>

위 코드에서는 <input> 요소를 만들고 v-model 디렉티브를 사용하여 formattedAmount 변수에 양식 데이터를 바인딩합니다. @input 이벤트 핸들러를 등록하여 사용자 입력을 감지하고 처리합니다.


데이터 처리 메서드

Vue 컴포넌트의 메서드를 사용하여 입력 데이터를 처리하고 천 단위 콤마를 추가합니다.

<script>
export default {
  data() {
    return {
      amount: 0, // 실제 숫자 값을 저장할 변수
      formattedAmount: "0", // 화면에 표시할 형식의 변수
    };
  },
  methods: {
    formatInput() {
      // 입력된 값을 숫자로 파싱하고 천 단위 콤마 추가
      const parsedAmount = parseFloat(this.formattedAmount.replace(/,/g, "")) || 0;
      this.amount = parsedAmount;
      this.formattedAmount = parsedAmount.toLocaleString("en-US");
    },
  },
};
</script>

formatInput 메서드는 입력된 값을 숫자로 파싱하고, 숫자를 천 단위 콤마 형식으로 포맷합니다. 그런 다음 amount 변수에 실제 숫자 값을 저장하고, formattedAmount 변수에 표시할 형식의 문자열을 업데이트합니다.


결과 확인

이제 Vue.js를 사용하여 input 요소에 천 단위 콤마를 추가한 예제를 구현했습니다. 사용자가 입력한 값은 숫자로 저장되고, 화면에는 천 단위 콤마가 추가된 형태로 표시됩니다. 이것은 금융 애플리케이션 및 숫자 입력 필드에서 사용자 경험을 향상시키는 데 도움이 됩니다.


마무리

이 포스팅에서는 Vue.js를 사용하여 input 요소에 천 단위 콤마를 추가하는 방법을 소개했습니다. 이러한 형식 변환 기능은 다양한 프로젝트에서 사용될 수 있으며, 사용자가 입력한 데이터를 쉽게 이해하고 시각화할 수 있도록 도움을 줍니다. 필요한 경우 스타일링을 추가하여 더 멋진 입력 필드를 만들 수도 있습니다.


Leave a Comment