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

绝地灬酷狼 2021-07-25 12:13 474阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]

//定义全局的时间过滤器
    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

## 组件中使用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]

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

## 处理结果如下展示： ##

![在这里插入图片描述][20200428111129886.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/274b76cfbd2644bf89e04dc5dcb5a77a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70 1]: /images/20210725/b5a72d1492f144c5a4cebc87fd37a450.png
[20200428111129886.png]: /images/20210725/f475d7f9f61041a0941eb5d118a51d4c.png