欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue時間轉(zhuǎn)換的幾種方式

 更新時間:2022年05月03日 13:54:27   作者:荒男  
這篇文章主要介紹了vue時間轉(zhuǎn)換的幾種方式,需要的朋友可以參考下

VUE 時間轉(zhuǎn)換

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

過濾器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的參數(shù)dataStr進(jìn)行運(yùn)算

局部過濾器

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

注意,此時是filters不是filter局部一般比全局多一個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ā)布時間:{{details.createTime|dateFormat}}</span>

JS引用轉(zhuǎn)換

在utils文件中建一個js,用于時間轉(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)
}

此時我們使用的時候,只要把js引用,在使用就行

全局引用

在main.js引用就行

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

局部引用

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

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

使用方式

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

總結(jié)

兩種方式各有千秋,但是我個人比較喜歡過濾器filter的使用,在學(xué)習(xí)過程中要學(xué)會舉一反三

更多關(guān)于vue時間轉(zhuǎn)換的方式請查看下面的相關(guān)鏈接

相關(guān)文章

  • React DOM diff 對比Vue DOM diff 區(qū)別詳解

    React DOM diff 對比Vue DOM diff 

    這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • Vue 3.x+axios跨域方案的踩坑指南

    Vue 3.x+axios跨域方案的踩坑指南

    這篇文章主要給大家介紹了關(guān)于Vue 3.x+axios跨域方案的踩坑指南,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue 3.x具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • vue3中使用router4 keepalive的問題

    vue3中使用router4 keepalive的問題

    這篇文章主要介紹了vue3中使用router4 keepalive的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue項(xiàng)目中引入vue-datepicker插件的詳解

    vue項(xiàng)目中引入vue-datepicker插件的詳解

    這篇文章主要介紹了vue項(xiàng)目中引入vue-datepicker插件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • 實(shí)現(xiàn)vuex原理的示例

    實(shí)現(xiàn)vuex原理的示例

    這篇文章主要介紹了實(shí)現(xiàn)vuex原理的示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下
    2020-10-10
  • vue?tailwindcss安裝配置教程示例詳解

    vue?tailwindcss安裝配置教程示例詳解

    這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • 通過一個簡單的例子學(xué)會vuex與模塊化

    通過一個簡單的例子學(xué)會vuex與模塊化

    這篇文章主要給大家介紹了關(guān)于如何通過一個簡單的例子學(xué)會vuex與模塊化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例

    Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例

    這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue3結(jié)合typescript中使用class封裝axios

    vue3結(jié)合typescript中使用class封裝axios

    這篇文章主要為大家介紹了vue3結(jié)合typescript中使用class封裝axios實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • element ui的el-input-number修改數(shù)值失效的問題及解決

    element ui的el-input-number修改數(shù)值失效的問題及解決

    這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05

最新評論