原因：中國人習慣上都是以xx年xx月xx日xx時xx分xx秒開始的

需求：將以下時間轉為xx年xx月xx日xx時xx分xx秒格式

毫秒數（例如：1642067638245）

Fri Jan 01 2021 00:00:00 GMT+0800 (中國標準時間)

2020/01/01

… …

轉化：

注意：一定要先new Date()，否則會報錯 Invalid Date 打印結果為NaN

類型一：頁面上只有一條該數據，需要轉換

<template><div>時間：{{date}}<div> <template> <script>export default {data() {return {date:'',result:{},httpData:{id:''}}},methods:{changeTime(){// vue3 獲取接口this.$api['接口地址'](this.httpData).then((res) => {// 打印res，假如是從res.data.date中取出時間，那么this.result = res.data// 一定要先創建時間對象let DateObj = new Date(this.result.date)// 將時間轉換為 XX年XX月XX日XX時XX分XX秒格式let year = DateObj .getFullYear()let month = DateObj .getMonth() + 1let day = DateObj .getDate()let hh = DateObj .getHours()let mm = DateObj .getMinutes()let ss = DateObj .getSeconds()month = month > 9 ? month : '0' + monthday = day > 9 ? day : '0' + day// 最終時間this.date = `${year}年${month}月${day}日${hh}時${mm}分${ss}秒}}} </script>

效果：

類型二：頁面上都多條數據，均為遍歷出來的

問題：因為從后臺訪問出來的接口，我這里數據是一個數組，想一次性把所有的數據日期格式轉換出來，最開始想著將數組遍歷出來然后在新建空數組，放進去。結果并不如意

解決：最開始想著的是使用過濾器 {{ | }} （vue2支持）

問題：我用的vue3,vue3不支持過濾器，官方建議用計算屬性或方法代替過濾器，而不是使用過濾器

解決：方法

<template><div><div v-for="details in detailsList" :key="details"><van-cell>{{ formatterDate(details.delivery_date) }}</van-cell></div></div> </template> <script>export default(){data(){rerurn{detailsList:[{delivery_date:'1642067638245'},{delivery_date:'1642067638288'}]}},methods:{formatterDate(val) {// 將時間轉換為 XX年XX月XX日XX時XX分XX秒格式let newDateObj = new Date(val)let year = newDateObj.getFullYear()let month = newDateObj.getMonth() + 1let day = newDateObj.getDate()let hh = newDateObj.getHours()let mm = newDateObj.getMinutes()let ss = newDateObj.getSeconds()month = month > 9 ? month : '0' + monthday = day > 9 ? day : '0' + day// 發送時間return `${year}年${month}月${day}日${hh}時${mm}分${ss}秒`}} </script>

寫完后發現真機測試，時間格式仍然是AM,PM格式

這時設置手機日期與時間為24小時制

總結

以上是生活随笔為你收集整理的vue实现时间转换功能(年月日时分秒)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。