Vue에서 숫자의 콤마(,) 구현하기

 

 

 

Vue에서 숫자의 콤마(,) 구현하기

 

 

 

---

<버전 정보>

• vue version : 2.6.14

 

---

 

<사용 계기>

• Vue.js을 사용하여 포트폴리오용 웹 앱을 개발 중 가격을 표기해야 할 상황이 생겨 숫자를 출력하였지만, 3자리마다 생기는 콤마(,)가 없으니 허전해보였다.
• 그래서 vue에서 콤마(,)를 사용할 수 있는 방법을 찾게 되었다.

 

---

 

<적용 과정>

• 적용 방법은 매우 간단하다.
• 콤마를 그리는 코드를 추가하고, 콤마를 표기할 숫자의 출력부에 몇 자의 코드를 적어주기만 하면 적용이 완료된다.

 

---

 

<실제 코드>

<template>
  <div>
    <v-card
      v-for="(item, i) in items"
      :key="i"
    >
        <v-list>
          <v-card-title>{{ item.date }}</v-card-title>
          <v-card
            v-for="(contents, c) in item.contents"
            :key="c"
          >
            <v-list-item-content>
              <v-list-item-title>{{ contents.title }} <small class="grey--text">( {{ contents.time }} )</small></v-list-item-title>
              <v-list-item-subtitle>
                가격 : {{ contents.amount | comma }}원
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-card>
        </v-list>
    </v-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      financialDialog: false,
      items: [
        {
          date: '2022-05-30',
          contents: [
            {
              time: '20:17:32',
              title: '돈까스 배달음식',
              amount: 15000,
            }
          ]
        }
      ]
    }
  },
  filters: {
    comma (val) {
      return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  }
}
</script>

comma를 사용한 결과 화면

• 위처럼 간단하게 몇 가지 코드를 추가하여 출력하려는 숫자에 콤마가 추가되었다.
• 코드의 최하단부에 filters라고 사용하였는데 이것으로는 텍스트 형식화(common text formatting)을 할 수 있다.
• 하지만 vue3.0에서 filters는 삭제되며 filters 대신 methods나 computed 속성 사용을 권장하고 있다. 그 이유는 아래의 공식 사이트 링크를 통하여 확인하길 바란다.

 

 

---

 

<정리>

• 이번에는 숫자에 콤마를 추가하는 방법에 대하여 알아보았다.
• filters를 처음 사용해보아서 확인하려고 공식 사이트에 들어가 보았으나 장점보다는 단점이 많아 vue3.0에는 삭제되는 것을 보고 아마 처음이자 마지막 사용이 아닐까 생각도 되었다.
• 현재 vue3.0에 vuetify가 지원되지 않아서 부득이하게 vue2.x을 사용하고 있어서 어쩔 수 없다.
• 그리고 vue 공식 사이트에서 계속 업데이트되는 내용을 자주 확인해봐야겠다고 생각되었다.

 

---

 

<참고 페이지>

• 라우팅 감지 참고 : https://kdinner.tistory.com/57

Vue - filters 기능 이용한 콤마 찍기

 

• vue.js 공식 사이트의 filters 부분 : https://v3.ko.vuejs.org/guide/migration/filters.html

Filters | Vue.js