vue.js와 moment.js를 사용하여 TODO에 날짜 표시

메모, TODO 목록에 날짜를 추가하는 방법을 알 수 없습니다.

moment.js 배포 절차

$ yarn add moment

그럼, vuecli 프로젝트에서moment.js를 설치합니다.

import moment from 'moment';

설치된moment.js를 읽습니다.

TODO에 날짜 표시

아래와 같이 TODO를 추가하는 간단한 코드를 작성합니다.

<template>
  <div id="app">
    <h2>todos</h2>
    <p>
      <input v-model="newtodo" v-on:keyup.enter="addtodo" />
    </p>
    <div v-for="todo in todos" :key="todo.id">
      <p>
        <span class="todo">{{ todo }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {

  data() {
    return {
      todos: [],
      newtodo: '',
    };
  },
  methods: {
    addtodo() {
      if (!this.newtodo) {
        return;
      }
      this.todos.push(this.newtodo);
      this.newtodo = '';
    },
  },
};
</script>

addtodo 방법에서 TODO와 현재 시간을 가져와서push를 todos[]로 가져옵니다.

    addtodo() {
      if (!this.newtodo) {
        return;
      }
      const params = {
        text: this.newtodo,
        created_at: new Date(),
      };
      this.todos.push(params);
      this.newtodo = '';
    },

parmas에 입력한 todo와created_new Date()에서 현재 날짜를 at에 대입합니다.this.todos.push에서 params값push를 수조 todos[]로 이동합니다.
따라서 템플릿의 {todo}에서 인용할 수 있습니다.

 <div v-for="todo in todos" :key="todo.id">
      <p>
        <span class="todo">{{ todo }}</span>
      </p>
    </div>

인용된 결과는 여기 있습니다.

"todo.text"라면 todos의 text를 찾을 수 있고, "todo.created_at"라면 날짜를 찾을 수 있습니다.
이것만 있다면, moment.js가 등장하지 않았기 때문에 활용해야 합니다.

export default {
  filters: {
    moment: function(date) {
      console.log(date);
      return moment(date).format('YYYY/MM/DD HH:mm');
    },
  },

상자에서 기본값을 선택합니다.문자열을 Date 함수보다 처리하기 쉬운 moment 함수로 변환합니다.
템플릿에서moment 필터{{ todo.created_at | moment }}를 사용합니다.moment(date).format('YYYY/MM/DD HH:mm'); 섹션에서는 YYY/MM/DD HHH:mm 형식으로 변환할 수 있습니다.
변환 결과는 다음과 같습니다.

사용법을 잊어버릴 것 같아서 적어 두었어요.