vue 모멘트 플러그인을 이용하여 시간을 포맷하는 실례 코드
npm 명령을 사용하여 moment 설치
npm install moment --save
메인js 파일에서 모멘트 인용
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Moment from 'moment'
//
Vue.filter('formatDate', function(value) {
return Moment(value).format('YYYY-MM-DD HH:mm:ss')
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
구성 요소에서 사용
<div class="time">{{item.rateTime | formatDate}}</div>
자주 사용하는 날짜 포맷 방법날짜 포맷
moment().format('MMMM Do YYYY, h:mm:ss a'); // 16 2019, 12:24:48
moment().format('dddd'); //
moment().format("MMM Do YY"); // 4 16 19
moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019
moment().format(); // 2019-04-16T12:24:48+08:00
상대 시간
moment("20111031", "YYYYMMDD").fromNow(); // 7
moment("20120620", "YYYYMMDD").fromNow(); // 7
moment().startOf('day').fromNow(); // 12
moment().endOf('day').fromNow(); // 12
moment().startOf('hour').fromNow(); // 28
달력 시간
moment().subtract(10, 'days').calendar(); // 2019 4 6
moment().subtract(6, 'days').calendar(); // 12 28
moment().subtract(3, 'days').calendar(); // 12 28
moment().subtract(1, 'days').calendar(); // 12 28
moment().calendar(); // 12 28
moment().add(1, 'days').calendar(); // 12 28
moment().add(3, 'days').calendar(); // 12 28
moment().add(10, 'days').calendar(); // 2019 4 26
다국어 지원
moment().format('L'); // 2019-04-16
moment().format('l'); // 2019-04-16
moment().format('LL'); // 2019 4 16
moment().format('ll'); // 2019 4 16
moment().format('LLL'); // 2019 4 16 12 28
moment().format('lll'); // 2019 4 16 12 28
moment().format('LLLL'); // 2019 4 16 12 28
moment().format('llll'); // 2019 4 16 12 28
설명서형식 코드
설명
반환값
YYYY
4자리 숫자 전체 표시 연도
예: 1999 또는 2019
M
숫자가 표시하는 달에는 전도 0이 없다
1 ~ 12
MM
숫자가 표시하는 달에는 전도 0이 없다
01 ~ 12
MMM
세 글자 줄임말로 표시한 달
1 월 ~ 12월
MMMM
숫자가 표시하는 달에는 전도 0이 없다
1 월 ~ 12월
M
월, 전체 텍스트 형식
1 ~ 12
D
월 중 며칠째 전도 제로가 없다
1 ~ 31
DD
월 중 며칠째 전도 제로가 있다
01 ~ 31
d
요일 며칠째
0 ~ 6, 0은 일요일, 6은 토요일
ddd
세 자모는 주중의 며칠을 나타낸다
일요일~토요일
dddd
요일, 전체 요일 텍스트
일요일~토요일
HH
시간, 24시간제
00 ~ 23
H
시간, 24시간제, 전도 제로 없음
0 ~ 23
hh
시간, 12시간제
00 ~ 12
h
시간, 12시간제, 전도 제로 없음
0 ~ 12
mm
분
00 ~ 59
m
분
0 ~ 59
ss
초, 선도 0
01 ~ 59
s
초, 무전도 0
1 ~ 59
총결산
이 글은 vue가 모멘트 플러그인을 이용하여 포맷하는 시간에 관한 글을 소개합니다. 더 많은 관련 vue가 모멘트로 포맷하는 시간에 대한 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.