Jadual Kandungan
时间戳转换日期格式有三种方法:
方式一
方式二
方式三
Rumah hujung hadapan web View.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 插件,并定义全局过滤器
    引入插件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}`})
Salin selepas log masuk
  1. 后面需要的时候,直接使用 dateFormat 即可
    在这里插入图片描述

方式三

HTML:
时间戳
Js:

timestampToTime (time) {// 时间戳为10位需*1000,时间戳为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;}
Salin selepas log masuk

相关免费学习推荐:JavaScript(视频)

Atas ialah kandungan terperinci 在vue.js怎么将时间戳换算成时间. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1657
14
Tutorial PHP
1257
29
Tutorial C#
1231
24
Perbincangan mendalam tentang cara vite menghurai fail .env Perbincangan mendalam tentang cara vite menghurai fail .env Jan 24, 2023 am 05:30 AM

Apabila menggunakan rangka kerja Vue untuk membangunkan projek bahagian hadapan, kami akan menggunakan berbilang persekitaran apabila digunakan Selalunya nama domain antara muka yang dipanggil oleh pembangunan, ujian dan persekitaran dalam talian adalah berbeza. Bagaimanakah kita boleh membuat perbezaan? Iaitu menggunakan pembolehubah dan corak persekitaran.

Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Apr 24, 2023 am 10:52 AM

Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).

Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Dec 15, 2022 pm 12:54 PM

Perbezaan antara komponenisasi dan modularisasi: Modularisasi dibahagikan dari perspektif logik kod; ia memudahkan pembangunan berlapis kod dan memastikan bahawa fungsi setiap modul berfungsi adalah konsisten. Pengkomponenan adalah perancangan dari sudut antara muka UI pemkomponenan bahagian hadapan memudahkan penggunaan semula komponen UI.

Terokai cara menulis ujian unit dalam Vue3 Terokai cara menulis ujian unit dalam Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.

Perbandingan mudah sintaks JSX dan sintaks templat dalam Vue (analisis kelebihan dan kekurangan) Perbandingan mudah sintaks JSX dan sintaks templat dalam Vue (analisis kelebihan dan kekurangan) Mar 23, 2023 pm 07:53 PM

Dalam Vue.js, pembangun boleh menggunakan dua sintaks berbeza untuk mencipta antara muka pengguna: sintaks JSX dan sintaks templat. Kedua-dua sintaks mempunyai kelebihan dan kekurangannya sendiri Mari kita bincangkan perbezaan, kelebihan dan kekurangannya.

Bagaimana untuk menanyakan versi vue semasa Bagaimana untuk menanyakan versi vue semasa Dec 19, 2022 pm 04:55 PM

Terdapat dua cara untuk menanyakan versi Vue semasa: 1. Dalam konsol cmd, laksanakan perintah "npm list vue" untuk menanya versi Hasil output ialah maklumat nombor versi Vue 2. Cari dan buka pakej. json fail dalam projek dan cari Anda boleh melihat maklumat versi vue dalam item "dependensi".

Mari kita bincangkan tentang cara menggunakan API Amap dalam vue3 Mari kita bincangkan tentang cara menggunakan API Amap dalam vue3 Mar 09, 2023 pm 07:22 PM

Apabila kami menggunakan Amap, pegawai mengesyorkan banyak kes dan tunjuk cara kepada kami, tetapi kes ini semua menggunakan kaedah asli untuk mengakses dan tidak memberikan tunjuk cara vue atau bertindak balas Ramai orang telah menulis tentang akses vue2 di Internet , kita akan melihat bagaimana vue3 menggunakan API Amap yang biasa digunakan saya harap ia akan membantu semua orang.

Analisis ringkas tentang cara vue melaksanakan muat naik menghiris fail Analisis ringkas tentang cara vue melaksanakan muat naik menghiris fail Mar 24, 2023 pm 07:40 PM

Dalam proses projek pembangunan sebenar, kadangkala perlu memuat naik fail yang agak besar, dan kemudian muat naik akan menjadi agak perlahan, jadi latar belakang mungkin memerlukan bahagian hadapan untuk memuat naik hirisan fail Sebagai contoh, 1 A aliran fail gigabait dipotong kepada beberapa aliran fail kecil, dan kemudian antara muka diminta untuk menghantar aliran fail kecil masing-masing.

See all articles