[vue.js] filter 사용법 및 자주 사용하는 filter 정리

서론

vue.js 개발하면서 자주 사용하는 filter를 정리한다.

소스

html

<template>
  <div class="text-center">
    원 데이터 : {{ date1 }}
    <br />
    YYYY.MM.DD : {{ date1 | dateFormat("YYYY.MM.DD") }}
    <br />
    YY-MM-DD : {{ date1 | dateFormat("YY-MM-DD") }}
    <br />
    ---------------------------------------------------
    <br />
    원 데이터 : {{ date2 }}
    <br />
    소수점 2자리 : {{ date2 | toFixed(2) }}
    <br />
    소수점 4자리 : {{ date2 | toFixed(4) }}
    <br />
    ---------------------------------------------------
    <br />
    원 데이터 : {{ date3 }}
    <br />
    3자리 콤마 : {{ date3 | comma() }}
  </div>
</template>

 

설명

vue에서 data 를 가져올때 사용하는 {{}} 안에 | 로 filter를 호출.

ex) {{ data | filter }}

script

<script>
import moment from "moment";

export default {
  filters: {
    dateFormat: function(val, format) {
      return moment(val).format(format);
    },
    toFixed: function(val, num) {
      return parseFloat(val).toFixed(num);
    },
    comma: function(val) {
      return String(Math.round(val)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
  data() {
    return {
      date1: "20220503",
      date2: 123.456789,
      date3: 123456789,
    };
  },
};
</script>

설명

dateFormat : moment를 사용하여 날짜 등등 포맷을 set

toFixed : toFixed를 사용하여 소수점 처리(반올림으로 적용됨)

comma : 정규식을 사용하여 숫자 3자리 , 처리

확인

 

 

* 테스트 소스 : https://github.com/hjh830827/test-project1

FilterTest.vue에서 확인 가능합니다.