vue時間轉(zhuǎn)換的幾種方式
更新時間：2022年05月03日 13:54:27 作者：荒男
這篇文章主要介紹了vue時間轉(zhuǎn)換的幾種方式,需要的朋友可以參考下
VUE 時間轉(zhuǎn)換
做一個項目肯定會關(guān)系到很多的數(shù)據(jù)類型,數(shù)據(jù)類型之間都是可以轉(zhuǎ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進行運算
局部過濾器
在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)文章
小編最近接手的項目中有個需求,前端顯示后端返回的PDF格式的文件,下面這篇文章主要給大家介紹了關(guān)于vue通過url方式展示PDF的幾種方法,需要的朋友可以參考下2023-01-01
Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能
這篇文章主要介紹了Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
本篇文章給大家詳細分析了vue組件開發(fā)腳手架的相關(guān)內(nèi)容以及知識點，對此有興趣的朋友可以學(xué)習(xí)參考下。2018-06-06
最近做項目的時候遇到了動態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項目動態(tài)加載圖片的正確寫法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue中的項目打包及部署全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue3的自定義指令directives實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了element?Drawer?抽屜無法渲染問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue.js常用指令的使用，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06
今天小編就為大家分享一篇Vue 菜單欄點擊切換單個class(高亮)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08