時間類庫的引入使用

<template> <div> <div class="timeFont">{{result}}</div> <h1>{{Date.now()|date}}</h1> </div> </template> <script> import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') export default { name:'test', data () { return { result:'', week:'', arr_week:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] } }, methods:{ timeFilter:function(t){ if(t<=9){ return '0'+t }else{ return t } } },  filters:{ date(val){ return moment(val).calendar() } }, created () { var that=this; setInterval(function(){ var time=new Date(); var year=time.getFullYear(); var month=time.getMonth()+1; var day=time.getDate(); var hour=time.getHours(); var minutes=time.getMinutes(); var second=time.getSeconds(); var weeks=time.getDay(); that.week=that.arr_week[+weeks]; that.result=`${year}/${that.timeFilter(month)}/${that.timeFilter(day)} ${that.timeFilter(hour)}:${that.timeFilter(minutes)}:${that.timeFilter(second)} ${that.week}` },1000) } } </script> <style> </style> 

npm i comment -s下載javascript

局部模板引入,並設置爲中國當地時間java

編寫過濾器,並對時間過濾npm

本身寫的簡單時鐘this

  

日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 十一月 6日 2017, 5:45:04 下午
moment().format('dddd');                    // 星期一
moment().format("MMM Do YY");               // 11月 6日 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                          // 2017-11-06T17:45:04+08:00
相對時間
moment("20111031", "YYYYMMDD").fromNow(); // 6 年前
moment("20120620", "YYYYMMDD").fromNow(); // 5 年前
moment().startOf('day').fromNow();        // 18 小時前
moment().endOf('day').fromNow();          // 6 小時內
moment().startOf('hour').fromNow();       // 1 小時前
日曆時間
moment().subtract(10, 'days').calendar(); // 2017年10月27日
moment().subtract(6, 'days').calendar();  // 上週二下午5點45
moment().subtract(3, 'days').calendar();  // 上週五下午5點45
moment().subtract(1, 'days').calendar();  // 昨天下午5點45分
moment().calendar();                      // 今天下午5點45分
moment().add(1, 'days').calendar();       // 明天下午5點45分
moment().add(3, 'days').calendar();       // 本週四下午5點45
moment().add(10, 'days').calendar();      // 2017年11月16日
多語言支持
moment().format('L');    // 2017-11-06
moment().format('l');    // 2017-11-06
moment().format('LL');   // 2017年11月6日
moment().format('ll');   // 2017年11月6日
moment().format('LLL');  // 2017年11月6日下午5點45分
moment().format('lll');  // 2017年11月6日下午5點45分
moment().format('LLLL'); // 2017年11月6日星期一下午5點45分
moment().format('llll');
相關文章
相關標籤/搜索