目錄
時間戳轉換日期格式有三種方法:
方式一
#方式二
首頁 web前端 Vue.js 在vue.js怎麼將時間戳換算成時間

在vue.js怎麼將時間戳換算成時間

Nov 10, 2020 am 10:39 AM
vue.js

vue.js將時間戳換算成時間的方法:先安裝moment外掛;然後在【main.js】檔案中引入moment外掛;最後直接引用dateFormat來轉換時間戳記即可。

在vue.js怎麼將時間戳換算成時間

本教學操作環境:windows10系統、vue2.9,本文適用於所有品牌的電腦。

推薦:《vue.js教學

時間戳記可以理解為過濾器的一種方式,日期格式的轉換在專案中也經常遇到,今天我來總結專案中踩過的坑,以及解決方法。

時間戳轉換日期格式有三種方法:

方式一

  1. #執行cmd 執行npm install moment --save yarn add moment 指令,安裝moment 插件
  2. 在main.js 檔案中引入moment 插件,並定義全域過濾器
    在vue.js怎麼將時間戳換算成時間3. 在後續元件中,如果需要轉換時間戳,那麼在直接引用dateFormat 即可
    引用dateFormat

#方式二

  1. 直接在main.js 檔案中定義一個全域過濾器
Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  //时间格式年月日、时分秒  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`})
登入後複製
  1. 後面需要的時候,直接使用dateFormat 即可
    在vue.js怎麼將時間戳換算成時間
##方式三

HTML:
在vue.js怎麼將時間戳換算成時間
Js:

timestampToTime (time) {// 在vue.js怎麼將時間戳換算成時間为10位需*1000,在vue.js怎麼將時間戳換算成時間为13位的话不需乘1000
      var date = new Date(time * 1000) 
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? (&#39;0&#39; + MM) : MM      let d = date.getDate()
      d = d < 10 ? (&#39;0&#39; + d) : d      let h = date.getHours()
      h = h < 10 ? (&#39;0&#39; + h) : h      let m = date.getMinutes()
      m = m < 10 ? (&#39;0&#39; + m) : m      let s = date.getSeconds()
      s = s < 10 ? (&#39;0&#39; + s) : s      return y + &#39;年&#39; + MM + &#39;月&#39; + d + &#39;日&#39;}
登入後複製
相關免費學習推薦:

JavaScript(影片)

以上是在vue.js怎麼將時間戳換算成時間的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

深入探討vite是怎麼解析.env檔的 深入探討vite是怎麼解析.env檔的 Jan 24, 2023 am 05:30 AM

使用vue框架開發前端專案時,我們部署的時候都會部署多套環境,往往開發、測試以及線上環境呼叫的介面網域都是不一樣的。如何能做到區分呢?那就是使用環境變數和模式。

圖文詳解如何在Vue專案中整合Ace程式碼編輯器 圖文詳解如何在Vue專案中整合Ace程式碼編輯器 Apr 24, 2023 am 10:52 AM

Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ,並且是 Mozilla Skywriter (Bespin) 專案的繼承者。

vue中組件化和模組化有什麼區別 vue中組件化和模組化有什麼區別 Dec 15, 2022 pm 12:54 PM

組件化和模組化的區別:模組化是從程式碼邏輯的角度進行劃分的;方便程式碼分層開發,確保每個每個功能模組的職能一致。元件化是從UI介面的角度進行規劃;前端的元件化,方便UI元件的重複使用。

探討如何在Vue3中撰寫單元測試 探討如何在Vue3中撰寫單元測試 Apr 25, 2023 pm 07:41 PM

在當今前端開發中,Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展,單元測試變得越來越重要。今天,我們將探討如何在 Vue.js 3 中編寫單元測試,並提供一些最佳實踐和常見的問題及解決方案。

深入聊聊vue3中的reactive() 深入聊聊vue3中的reactive() Jan 06, 2023 pm 09:21 PM

前言:在vue3的開發中,reactive是提供實現響應式資料的方法。日常開發這個是使用頻率很高的api。這篇文章筆者就來探索其內部運作機制。

Vue中JSX語法和模板語法的簡單比較(優劣勢分析) Vue中JSX語法和模板語法的簡單比較(優劣勢分析) Mar 23, 2023 pm 07:53 PM

在Vue.js中,開發人員可以使用兩種不同的語法來建立使用者介面:JSX語法和範本語法。這兩種文法各有優劣,以下就來探討它們的差異和優劣勢。

怎麼查詢目前vue的版本 怎麼查詢目前vue的版本 Dec 19, 2022 pm 04:55 PM

查詢目前vue版本的兩種方法:1、在cmd控制台內,執行「npm list vue」指令查詢版本,輸出結果就是vue的版本號資訊;2、在專案中找到並開啟package.json文件,查找「dependencies」項目即可看到vue的版本資訊。

淺析Vue3動態組件怎麼進行異常處理 淺析Vue3動態組件怎麼進行異常處理 Dec 02, 2022 pm 09:11 PM

Vue3動態元件怎麼進行異常處理?以下這篇文章帶大家聊聊Vue3 動態元件異常處理的方法,希望對大家有幫助!

See all articles