시간 변환

프로젝트를 수행하는 데는 분명히 많은 데이터 유형이 필요하며 데이터 유형은 변환 될 수 있습니다. 때로는 프론트 엔드가 백엔드에서 가져 오는 시간이 표준을 충족하지 않습니다. 이때 변환해야합니다. 두 가지 변환이 있으며 개인적으로 선호하는 변환이 무엇인지에 따라 다릅니다. 여기에 시간이 예제로 변환되었습니다.

필터

글로벌 필터

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

이때 timestamp details.createTime은 계산을위한 Vue.filter의 dataStr 매개 변수가됩니다.

로컬 필터

vue 단일 파일에는 주기적 함수와 병치되는 filters 속성이 있습니다.

현재 필터는 필터가 아닙니다. 로컬에서는 일반적으로 글로벌보다 하나 더 있습니다. 예를 들어 글로벌 구성 요소와 로컬 구성 요소의 차이는 동일합니다.

  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>

요약하자면

두 가지 방법은 각각 장점이 있지만 개인적으로 필터 사용을 선호
하며 학습 과정에서 서로 추론하는 방법을 배웁니다.

Vue 시간 변환의 여러 방법

변환