vue时间转换的几种方式

水深无声 2023-06-18 04:52 14阅读 0赞

### 转换 ###

*  时间转换
 *   *  过滤器filter
     *   *   *  全局过滤器
             *  局部过滤器
             *  使用
     *  JS引用转换
     *   *   *  全局引用
             *  局部引用
             *  使用方式
     *  总结

# 时间转换 #

做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,，前端有时候从后端拿到的时间不符合标准，此时就需要转换以后再去使用，转换有两种方式，看你个人比较喜欢哪一种。这里已时间转换为例子

## 过滤器filter ##

#### 全局过滤器 ####

在main.js写入

// 时间戳过滤器
    Vue.filter('dateFormat', (dataStr) => { 
      var time = new Date(dataStr)
    
      function timeAdd0 (str) { 
        if (str < 10) { 
          str = '0' + str
        }
        return str
      }
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      var h = time.getHours()
      var mm = time.getMinutes()
      var s = time.getSeconds()
      return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
    })

此时时间戳details.createTime就会变成Vue.filter的参数dataStr进行运算

#### 局部过滤器 ####

在vue单文件中，有filters属性，和周期函数并列，

> 注意，此时是filters不是filter局部一般比全局多一个s，比如components的全局和局部的区别是一样的

created(){ 
      },
      filters:{ 
          dateFormat:function(dataStr){ 
            var time = new Date(dataStr)
            function timeAdd0 (str) { 
              if (str < 10) { 
                str = '0' + str
              }
              return str
            }
            var y = time.getFullYear()
            var m = time.getMonth() + 1
            var d = time.getDate()
            var h = time.getHours()
            var mm = time.getMinutes()
            var s = time.getSeconds()
            return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s)
           }
      },

#### 使用 ####

使用方式全局和局部都是一样的，我们只需要在过滤的数据后面加上 | 就行

<span>发布时间：{
       {details.createTime|dateFormat}}</span>

## JS引用转换 ##

在utils文件中建一个js，用于时间转换

export function tempToData(unixtimestamp2) { 
      var unixtimestamp = new Date(unixtimestamp2)
      var year = 1900 + unixtimestamp.getYear()
      var month = '0' + (unixtimestamp.getMonth() + 1)
      var date = '0' + unixtimestamp.getDate()
      var hour = '0' + unixtimestamp.getHours()
      var minute = '0' + unixtimestamp.getMinutes()
      var second = '0' + unixtimestamp.getSeconds()
      return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length) +
        ' ' + hour.substring(hour.length - 2, hour.length) + ':' +
        minute.substring(minute.length - 2, minute.length) + ':' +
        second.substring(second.length - 2, second.length)
    }

此时我们使用的时候，只要把js引用，在使用就行

#### 全局引用 ####

在main.js引用就行

import {  tempToData } from '@/utils/DataUtils'

#### 局部引用 ####

在对应的vue文件中引用

import {  tempToData } from '@/utils/DataUtils'

#### 使用方式 ####

<span>{
       { mTempToData(details.createTime) }}</span>

## 总结 ##

两种方式各有千秋，但是我个人比较喜欢过滤器filter的使用  
在学习过程中要学会举一反三