Vue - 自定义格式化时间的全局过滤器

在main.js中定义全局的时间过滤器

//定义全局的时间过滤器
function GetDate(originval){
  //需要处理的时间
  const dt=new Date(originval*1000)

  //年
  const y = dt.getFullYear()
  //月
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
  //日
  const d = (dt.getDate() + '').padStart(2,'0')
  //时
  const hh = (dt.getHours() + '').padStart(2,'')
  //分
  const mm = (dt.getMinutes() + '').padStart(2,'')
  //秒
  const ss = (dt.getSeconds() + '').padStart(2,'')

  //返回时间格式  yyyy-mm-dd hh:mm:ss
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
//应用于插值表达式中
Vue.filter('dateFormat',GetDate)
//应用于方法中
Vue.prototype.$getDate = GetDate

组件中使用

<template>
  <div>
    <el-row>
      <el-col :span="4">在插值表达式中使用</el-col>
      <el-col :span="4">{{dateTime | dateFormat}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">方法中获取使用</el-col>
      <el-col :span="4">{{time}}</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dateTime:1588037605,
      time:0
    }
  },
  mounted(){
    this.getDate()
  },
  methods:{
    getDate(){
      const date = this.$getDate(this.dateTime)
      this.time = date
    }
  }
}
</script>
<style>
</style>

处理结果如下展示：