[Vue.js] 숫자 자릿수 잘라서 보여주기(?)

 

위와 같은 형태를 화면에 구현해야 했다. 이를 위해 데이터로부터 받아 오는 숫자를 하나하나 쪼개서, div에 각각의 숫자를 집어넣는 방법을 생각했다. 

 

<div class="block-price-won">₩</div>
     <div
        class="block-price"
        v-for="(priceNum, i) in priceLength"
        v-bind:key="i">
        {{ priceTotal(priceLength, i) }}
      </div>
</div>

 

 export default {
    props: ["paymentData"],
    data() {
      this.paymentData.slicePrice = String(this.paymentData.paymentPrice).split("")
      return {
        priceLength: 10,
      }
    },
    methods: {
      priceTotal(length, i) {
      const calcuIndex = this.paymentData.slicePrice.length - length + i
      return calcuIndex >= 0 ? this.paymentData.slicePrice[calcuIndex] : ""
      }
    }

 

(1) <template>

 

먼저, 화면에서 총 10개의 빈칸이 반복되고 있으므로 <script>의 data() 영역에서 priceLength를 10으로 지정하고, priceLength만큼 div 태그를 v-for로 돌려주었다. 

 

그리고 화면에 출력되는 텍스트 값은 methods의 priceTotal 함수의 결과값이 되도록 했다. 

 

---

 

(2) <script>

 

표기해야 하는 합계 값이 부모 컴포넌트로부터 "paymentData"라는 이름의 prop으로 내려온다.  

data() 영역에서, 데이터로부터 받아 온 합계 숫자값(여기서는 paymentData.paymentPrice)을 split 함수로 각 자릿수별로 쪼개 각각의 숫자 배열이 되도록 만들었다.

그리고 각각의 숫자는 String 함수를 사용하여 문자열로 만들어주었다. 

// this.paymentData.slicePrice = [ "1", "3", "9", "0", "0", "0"]

 

---

 

(3) script > methods

 

pricetotal 함수를 만들고 이 함수에는 length와 i 두 개의 인자를 받을 수 있도록 했다.

 

const calcuIndex = this.paymentData.slicePrice.length - length + i
return calcuIndex

 

여기까지를 실행시키면 화면에는 다음과 같이 출력된다.

 

calcuIndex만 실행시키면 표시해야 하는 합계값의 자릿수만큼 양수로 반환된다. 그런 다음,

 

priceTotal(length, i) {
      const calcuIndex = this.paymentData.slicePrice.length - length + i
      return calcuIndex >= 0 ? this.paymentData.slicePrice[calcuIndex] : ""
      }

 

조건문을 활용하여 calcuIndex가 0보다 크거나 같으면 slicePrice 배열에 담긴 숫자를 반환하도록 만들어주었다.