vue時(shí)間轉(zhuǎn)換的方式有哪些

這篇“vue時(shí)間轉(zhuǎn)換的方式有哪些”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue時(shí)間轉(zhuǎn)換的方式有哪些”文章吧。

VUE 時(shí)間轉(zhuǎn)換

做一個(gè)項(xiàng)目肯定會關(guān)系到很多的數(shù)據(jù)類型,數(shù)據(jù)類型之間都是可以轉(zhuǎn)化的,，前端有時(shí)候從后端拿到的時(shí)間不符合標(biāo)準(zhǔn)，此時(shí)就需要轉(zhuǎn)換以后再去使用，轉(zhuǎn)換有兩種方式，看你個(gè)人比較喜歡哪一種。這里已時(shí)間轉(zhuǎn)換為例子

過濾器filter

全局過濾器

在main.js寫入

// 時(shí)間戳過濾器
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)
})

此時(shí)時(shí)間戳details.createTime就會變成Vue.filter的參數(shù)dataStr進(jìn)行運(yùn)算

局部過濾器

在vue單文件中，有filters屬性，和周期函數(shù)并列，

注意，此時(shí)是filters不是filter局部一般比全局多一個(gè)s，比如components的全局和局部的區(qū)別是一樣的

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

使用

使用方式全局和局部都是一樣的，我們只需要在過濾的數(shù)據(jù)后面加上 | 就行

<span>發(fā)布時(shí)間：{{details.createTime|dateFormat}}</span>

JS引用轉(zhuǎn)換

在utils文件中建一個(gè)js，用于時(shí)間轉(zhuǎn)換

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

此時(shí)我們使用的時(shí)候，只要把js引用，在使用就行

全局引用

在main.js引用就行

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

局部引用

在對應(yīng)的vue文件中引用

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

使用方式

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

以上就是關(guān)于“vue時(shí)間轉(zhuǎn)換的方式有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。