Vue指定时间字符串格式化

引言

在实际开发中我们经常要处理时间的格式化，我们经常会用到 moment.js时间处理类库
下面是我Vue实际开发中经常用的时间格式化

需求过程

1、在后台填写表单的时候，引用Ant Design Vue（Vue2使用V1.7.8版本）的 日期时间选择器 绑定好Value选择了日期，并且提交时间进行格式化

moment(this.currentTime).format('YYYY-MM-DD')

2、后端处理好后访问接口数据，时间格式为 2022-11-03 10:22:21，UI显示为 11月3日 10:22 am

• new Date(’ 2022-11-03 10:22:21’) —— 格式化为 ——
  Thu Nov 03 2022 10:22:21 GMT+0800 (中国标准时间)

moment(new Date(item.startTime)).format('YYYY年M月DD日 h:mm A')

此外

也可以利用Vue的 Computed 钩子来计算开始时间的格式化

<span class="item-text de-text">{
   
   { CreateTime(item.createTime) }}</span>

computed:{
    
    
	CreateTime(){
    
    
		return function(value){
    
    
		 return moment(new Date(item.startTime)).format('YYYY年M月DD日 h:mm A')
		}
	}
}

小坑！！！：（已踩666）

直接CreateTime(value){ return … } 会报错的，
Error in render: “TypeError: _vm.CreateTime is not a function”

因为这样写法就相当于一个普通函数了，是要在method中定义的；
而我们这里只需他返回格式化的时间字符串，所以我使用返回一个空函数里面再返回他的值