Vue如何將時間戳轉(zhuǎn)換日期格式
更新時間：2023年09月21日 15:38:55 作者：LW0512
這篇文章主要介紹了Vue如何將時間戳轉(zhuǎn)換日期格式,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
vue時間戳轉(zhuǎn)換日期格式
一，vue獲取時間戳轉(zhuǎn)換為日期格式
后臺返回的時間戳格式（例如：creatTime: 1626832597790），需要用時間格式顯示
（1）需要2021-09-05格式顯示
<el-table-column align="center" label="發(fā)布日期">
<template slot-scope="scope">
<span v-if="scope.row.creatTime != null">
{{ parseTime(scope.row.creatTime, "{y}-{m}-vvxyksv9kd") }}
</span>
</template>
</el-table-column>（2）需要2021-08-27 09:19:35格式顯示
<el-table-column align="center" label="提交反饋時間">
<template slot-scope="scope">
<span v-if="scope.row.creatTimes!= null">
{{ parseTime(scope.row.creatTime ) }}
</span>
</template>
</el-table-column>二， 需要向后臺傳時間戳格式的寫法 如下格式
（1）2020-09-28格式轉(zhuǎn)時間戳
return{
form:{
startTime:"",
endTime:"",
}
}startTime:new Date(this.form.startTime).getTime() endTime: new Date(this.form.endTime).getTime()
（2）如果開始時間或者結(jié)束時間取當(dāng)天時間
return{
form:{
startTime: new Date(),
endTime:"",
}
}startTime: new Date(this.form.startTime).getTime() endTime: new Date(this.form.endTime).getTime()
（3）如下格式 2021-09-28—2021-09-30格式
<el-form-item>
<span class="demonstration">日期篩選：</span>
<el-date-picker
v-model="createTime"
type="daterange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
>
</el-date-picker>
</el-form-item> return{
createTime:"",
}startTime:this.createTime && this.createTime[0] ? new Date(this.createTime[0]).getTime() : "", endTime:this.createTime && this.createTime[1] ? new Date(this.createTime[1]).getTime(): "",
三，獲取當(dāng)前的年月日時分秒并展示
<div class="rightime">
<div class="span1">{{ nowtime }}</div >
</div> return{
nowtime:""
}
mounted(){
setInterval(() => {
this.getTime();
}, 1000);
},
methods:{
getTime() {
this.nowtime = parseTime(new Date(), '{y}年{m}月vvxyksv9kd日 {h}:{i}:{s} 周{a}');
},
}
四，需要傳（2021-12-16）
<el-date-picker type="date" placeholder="選擇日期" v-model="auditorPostponeTime"> </el-date-picker>
data(){
return{
auditorPostponeTime:'',
}
}
let times = '';
if (this.auditorPostponeTime) {
times = parseTime(this.auditorPostponeTime, '{y}-{m}-vvxyksv9kd');
}
let req={
auditorPostponeTime: times, //同意選擇的時間
}五，注意：代碼中必須要引入date.js文件，并在方法中使用即可，否則以上不成立
import { parseTime } from "@/utils/date";（1）創(chuàng)建一個date.js文件，內(nèi)容如下：
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-vvxyksv9kd {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
return value.toString().padStart(2, '0')
})
return time_str
}
/**
* @param {number} time
* @param {string} option
* @returns {string}
*/
export function formatTime(time, option) {
if (('' + time).length === 10) {
time = parseInt(time) * 1000
} else {
time = +time
}
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
if (diff < 30) {
return '剛剛'
} else if (diff < 3600) {
// less 1 hour
return Math.ceil(diff / 60) + '分鐘前'
} else if (diff < 3600 * 24) {
return Math.ceil(diff / 3600) + '小時前'
} else if (diff < 3600 * 24 * 2) {
return '1天前'
}
if (option) {
return parseTime(time, option)
} else {
return (
d.getMonth() +
1 +
'月' +
d.getDate() +
'日' +
d.getHours() +
'時' +
d.getMinutes() +
'分'
)
}
}
/**
* @param {string} url
* @returns {Object}
*/
export function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ') +
'"}'
)
}到此這篇關(guān)于Vue時間戳轉(zhuǎn)換日期格式的文章就介紹到這了,更多相關(guān)Vue時間戳轉(zhuǎn)換日期格式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問題解決
這篇文章主要為大家詳細介紹一下Vue使用xlsx-style導(dǎo)出excel時樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問題的解決,需要的可以參考下2024-01-01
這篇文章主要介紹了vue中的mixins混入使用方法，混入又分全局混入混入局部混入，下文對兩者都有相關(guān)介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
在現(xiàn)代的前端開發(fā)中,用戶體驗的重要性不言而喻,為了讓應(yīng)用程序更加生動和引人注目,動畫和過渡效果是必不可少的元素,本文將以 Vue3 為基礎(chǔ),深入探討如何在應(yīng)用程序中實現(xiàn)動畫過渡,以及一些技巧和最佳實踐,需要的朋友可以參考下2025-01-01
這篇文章主要給大家介紹了關(guān)于Vue+Element-ui日歷排班自定義的相關(guān)資料,有現(xiàn)成的日歷插件但是不符合需求,所以項目中使用vue+element的表格組件自己實現(xiàn)一個日歷組件,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作,需要的朋友可以參考下2023-04-04
vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧2018-08-08
日歷在很多地方都可以使用的到，本文主要介紹了vue3日歷控件的具體實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
本篇文章主要介紹了如何實現(xiàn)一個簡單的 vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果，Vue 提供了內(nèi)置的過渡封裝組件transition，該組件用于包裹要實現(xiàn)過渡效果的組件2021-10-10
這篇文章主要介紹了vue中l(wèi)et that=this的作用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10