[Vue.js] filter 사용하기

 

 

 

 

각종 데이터의 포맷을 변경하기 위해 computed를 쓸 수도 있지만 한 번도 만들어보지 않은 filter를 사용하기로 했다.

날짜포맷 예제를 만들기 위해 Date 자료형을 simpleDateFormat을 사용하여 'yyyy-MM-dd' 형태로 바꾸려고했는데..

자바스크립트는.. simpleDateFormat이 없네..

 

 

그래서 다른 사람들은 어떻게 쓰나 찾아보니 moment.js를 많이 사용한다고 한다.

난... 어차피 예제용이라 그냥 하나씩 변경해주었다.

 

 

---

 

◽ 컴포넌트 옵션에서 사용하기

📄 HTML

mustache 표현 안에 '|'(=파이프)를 사용하면 된다.

<template>
    <div>{{ date | dateFormatFilter }}</div>
</template>

 

📄 Script

export default {
  data() {
    return {
      date: new Date()
    };
  },
  filters: {
    dateFormatFilter(value) {
      let year = value.getFullYear()
      let month = (value.getMonth()+1).toString().padStart(2, '0')
      let date = value.getDate().toString().padStart(2, '0')
      let hour = value.getHours().toString().padStart(2, '0')
      let minute = value.getHours().toString().padStart(2, '0')
      let seconds = value.getHours().toString().padStart(2, '0')

      let dateArr = [year, month, date]
      let timeArr = [hour, minute, seconds]

      return dateArr.join('-') + " " + timeArr.join(':')
    },
  }
};

 

 

 

◽ 전역으로 사용하기

📄 HTML

<template>
    <div>{{ date | globalDateFormatFilter }}</div>
</template>

 

📄 Script

먼저 main.js에 filter를 import 해준다. (import './filters')

그리고 아래와 같이 js 파일을 만든다.

import Vue from "vue";

Vue.filter("globalDateFormatFilter", (value) => {
  let year = value.getFullYear();
  let month = (value.getMonth() + 1).toString().padStart(2, "0");
  let date = value.getDate().toString().padStart(2, "0");
  let hour = value.getHours().toString().padStart(2, "0");
  let minute = value.getMinutes().toString().padStart(2, "0");
  let seconds = value.getSeconds().toString().padStart(2, "0");

  let dateArr = [year, month, date];
  let timeArr = [hour, minute, seconds];

  return dateArr.join("-") + " " + timeArr.join(":");
});

 

 

---

 

 

이렇게 출력된다!

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.