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}-wppm3vysvbp") }}
</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é)束時間取當天時間
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(): "",
三，獲取當前的年月日時分秒并展示
<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}月wppm3vysvbp日 {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}-wppm3vysvbp');
}
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}-wppm3vysvbp {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手寫tree插件的那點事兒，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue cli2.0單頁面title修改方法，非常不錯，具有一定的參考借鑒,需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了簡單方法實現(xiàn)Vue?無限滾動組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關(guān)于Vue項目中ESlint規(guī)范的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue3緩存頁面keep-alive及路由統(tǒng)一處理詳解
當我們不想每次跳轉(zhuǎn)路由都會重新加載頁面時（重新加載頁面很耗時）,就可以考慮使用keep-alive緩存頁面了,這篇文章主要給大家介紹了關(guān)于vue3緩存頁面keep-alive及路由統(tǒng)一處理的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了Vue標尺插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
在vue中給列表中的奇數(shù)行添加class的實現(xiàn)方法
今天小編就為大家分享一篇在vue中給列表中的奇數(shù)行添加class的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Tailwind是由Adam Wathan領(lǐng)導(dǎo)的TailwindLabs開發(fā)的 CSS 框架，這篇文章主要介紹了vue3?tailwindcss的使用,需要的朋友可以參考下2023-08-08
詳解unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm
這篇文章主要為大家介紹了unplugin?vue?components不能識別組件自動導(dǎo)入類型pnpm詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01