Time conversion

Doing a project will definitely involve a lot of data types, and data types can be converted. Sometimes the time that the front-end gets from the back-end does not meet the standard. At this time, it needs to be converted and then used. There are two conversions. It depends on which one you personally prefer. Here has been time converted to an example

Filter

Global filter

Write in 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)
})

At this time, the timestamp details.createTime will become the parameter dataStr of Vue.filter for calculation

Local filter

In the vue single file, there are filters attribute, which is juxtaposed with periodic functions,

Note that at this time, filters are not filters. Locally, there is generally one more s than global. For example, the difference between global and local components is the same.

  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)
       }
  },

use

The usage is the same globally and locally, we only need to add | after the filtered data.

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

JS reference conversion

Build a js in the utils file for time conversion

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

At this time, when we use it, we just need to quote js and use it.

Global reference

Just reference in main.js

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

Local reference

Reference in the corresponding vue file

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

How to use

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

to sum up

The two methods have their own merits, but I personally prefer the use of filter.
In the learning process, learn to draw inferences from one another.

Several ways of vue time conversion

Conversion