vue時(shí)間轉(zhuǎn)換的幾種方式
VUE 時(shí)間轉(zhuǎn)換
做一個(gè)項(xiàng)目肯定會(huì)關(guān)系到很多的數(shù)據(jù)類(lèi)型,數(shù)據(jù)類(lèi)型之間都是可以轉(zhuǎn)化的,，前端有時(shí)候從后端拿到的時(shí)間不符合標(biāo)準(zhǔn)，此時(shí)就需要轉(zhuǎn)換以后再去使用，轉(zhuǎn)換有兩種方式，看你個(gè)人比較喜歡哪一種。這里已時(shí)間轉(zhuǎn)換為例子
過(guò)濾器filter
全局過(guò)濾器
在main.js寫(xiě)入
// 時(shí)間戳過(guò)濾器
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就會(huì)變成Vue.filter的參數(shù)dataStr進(jìn)行運(yùn)算
局部過(guò)濾器
在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)
}
},
使用
使用方式全局和局部都是一樣的，我們只需要在過(guò)濾的數(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'
局部引用
在對(duì)應(yīng)的vue文件中引用
import { tempToData } from '@/utils/DataUtils'
使用方式
<span>{{ mTempToData(details.createTime) }}</span>
總結(jié)
兩種方式各有千秋，但是我個(gè)人比較喜歡過(guò)濾器filter的使用，在學(xué)習(xí)過(guò)程中要學(xué)會(huì)舉一反三
更多關(guān)于vue時(shí)間轉(zhuǎn)換的方式請(qǐng)查看下面的相關(guān)鏈接
相關(guān)文章
React DOM diff 對(duì)比Vue DOM diff
這篇文章主要為大家介紹了React DOM diff 對(duì)比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue 3.x+axios跨域方案的踩坑指南，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue 3.x具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue3中使用router4 keepalive的問(wèn)題
這篇文章主要介紹了vue3中使用router4 keepalive的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目中引入vue-datepicker插件的詳解
這篇文章主要介紹了vue項(xiàng)目中引入vue-datepicker插件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了實(shí)現(xiàn)vuex原理的示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
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實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05