moment.js+过滤器filter在Vue CLI中做日期处理

本文链接：https://blog.csdn.net/u010234868/article/details/120510119

在控制台输入moment()可以查看相关属性。

安装：

cnpm i moment -S

安装后启动项目：

npm run dev

main.js中导入并创建全局过滤器：

// 导入moment
import Moment from 'moment';

// 自定义moment全局过滤器
Vue.filter('convertTime', function(timeStr, formatStr) {
  return Moment(timeStr).format(formatStr);
});

ChaoShiDetail.vue中convertTime过滤器的调用：

<template>
  <div class="detail">
    <Navbar :title="title" />
    {{ 1236 }}
    发表时间：{{ time | convertTime('YYYY-MM-DD')}}
  </div>
</template>

<script>
  export default {
    name: 'ChaoShiDetail',
    data() {
      return {
        title: '详情介绍',
        // details: {}
        time: '2021-09-27T15:40:50+08:00'
      }
    },
    // create(){
    //   let id = this.$route.query.id;
    //   this.$axios.get(`/getDetails/${id}`)  // 模板字符串拼接变量
    //   .then((res) => {
    //     this.details = res.data.message[0];
    //   })
    //   .catch((err) => {
    //     console.log('详情数据异常', err);
    //   })
    // }
  }
</script>

<style>
  .detail {
    margin-top: 10px;
    padding: 0 15px;
  }
</style>

页面：