时间类库的引入使用

<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下载

局部模板引入,并设置为中国当地时间

编写过滤器,并对时间过滤

自己写的简单时钟

  

日期格式化
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');
posted @ 2017-11-06 17:47  爱编程的douyaer  阅读(177)  评论(0编辑  收藏  举报
Fork me on MaYun