亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決

 更新時(shí)間:2023年05月12日 17:02:50   作者:Cherry?  
這篇文章主要介紹了moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date

項(xiàng)目用在使用moment轉(zhuǎn)換時(shí)間戳的時(shí)候出現(xiàn)Invalid Date

通過后端接口發(fā)現(xiàn)接口返回的字段是 beginTime: “1612922019029”

在數(shù)據(jù)傳遞得過程中類型發(fā)生了變化 所以得把字符串用Number()轉(zhuǎn)化下數(shù)字類型即可正常顯示

// 轉(zhuǎn)換數(shù)字類型
beginTime: this.$moment(Number(item.beginTime)).format(
 "YYYY-MM-DD"
),

還有個(gè)小問題就是如果某個(gè)時(shí)間戳為空是時(shí),則會(huì)顯示1970-01-01

后端返回的字段

所以為了防止顯示1970-01-01,所以通過三目運(yùn)算判斷一下

 endTime:
	   item.endTime == ""
	     ? ""
	     : this.$moment(Number(item.endTime)).format("YYYY-MM-DD"),

這樣頁面上頁就不會(huì)出現(xiàn)1970-01-01

使用Moment.js處理時(shí)間戳轉(zhuǎn)化為時(shí)間年月

Moment.js 是一個(gè) JavaScript 日期處理類庫(處理時(shí)間格式化的npm包),用于解析、檢驗(yàn)、操作、以及顯示日期,在新公司的項(xiàng)目中,大量使用Moment來處理時(shí)間日期,非常方便好用。

Moment.js 中文網(wǎng):

http://momentjs.cn/

優(yōu)點(diǎn)

  • 不依賴任何第三方庫
  • 支持字符串、Date、時(shí)間戳以及數(shù)組等格式
  • 可以同時(shí)在瀏覽器和node環(huán)境中使用
  • 前后端通用,文檔也很詳細(xì)
  • 方便了日常開發(fā)中對(duì)時(shí)間的操作,提高了開發(fā)效率

使用步驟

1:在項(xiàng)目里面安裝Moment

cnpm install moment --save

2:在要使用的組件里面引入

import moment from 'moment'; 

3:時(shí)間戳如下

{
  "users": [
    {
        "startTime":"1572502840091",
        "endTime":"1572512489920"
    }, {
      "startTime":"1572512489920",
      "endTime":"1572513935374"
    }
]
}

4:代碼

這里把時(shí)間戳做成了mock數(shù)據(jù),使用axios對(duì)數(shù)據(jù)接口進(jìn)行請(qǐng)求,請(qǐng)求完成之后渲染在前端界面,如果有不理解的地方可以查看專題從零開始學(xué)react系列教程。

import React from 'react';
import axios from 'axios';
import moment from 'moment';
class Time extends React.Component {
  //構(gòu)造函數(shù)
  constructor() {
    super();
    //react定義數(shù)據(jù)
    this.state = {
      list: []
    }
  }
  //請(qǐng)求接口的方法
  getData = () => {
    var api = 'http://localhost:3004/users';
    axios.get(api)
      .then((response) => {
        // handle success
        console.log(response.data);
        //用到this需要注意指向,箭頭函數(shù)
        this.setState({
          list: response.data
        })
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  }
  render() {
    return (
      <div>
        <h2>時(shí)間戳轉(zhuǎn)化為時(shí)間</h2>
        <button onClick={this.getData}>獲取時(shí)間</button>
        <ul>
          {
            this.state.list.map((value, key) => {
              let start = moment(parseInt(value.startTime)).format('YYYY/MM/DD hh:mm:ss');
              let end = moment(parseInt(value.endTime)).format('YYYY/MM/DD hh:mm:ss');
              return (
                <li key={key}>
                  <span>開始時(shí)間:{start}</span>
                  <span>結(jié)束時(shí)間:{end}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
export default Time;

5:效果

代碼運(yùn)行如下,獲取到了時(shí)間年月日了。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案

    vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案

    在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下
    2021-07-07
  • vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法

    vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法

    這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目報(bào)錯(cuò):Missing?script:"serve"的解決辦法,"missing script: serve"是一個(gè)錯(cuò)誤信息,意味著在執(zhí)行啟動(dòng)腳本時(shí),找不到名為"serve"的腳本,需要的朋友可以參考下
    2023-11-11
  • 解決vuecli3中img src 的引入問題

    解決vuecli3中img src 的引入問題

    這篇文章主要介紹了解決vuecli3中img src 的引入問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼

    Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼

    這篇文章主要介紹了Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼,文中通過分享一段代碼介紹vue 側(cè)邊導(dǎo)航欄遞歸顯示功能,需要的朋友可以參考下
    2018-09-09
  • vue項(xiàng)目引入本地bootstrap不生效問題及解決

    vue項(xiàng)目引入本地bootstrap不生效問題及解決

    這篇文章主要介紹了vue項(xiàng)目引入本地bootstrap不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案

    vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案

    vue項(xiàng)目每次發(fā)布新版本后,測(cè)試人員都要強(qiáng)制刷新才能更新瀏覽器代碼來驗(yàn)證bug,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案,需要的朋友可以參考下
    2024-03-03
  • uniapp引入模塊化js文件和非模塊化js文件的四種方式

    uniapp引入模塊化js文件和非模塊化js文件的四種方式

    這篇文章主要介紹了uniapp引入模塊化js文件和非模塊化js文件的四種方式,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-11-11
  • vue+vant使用圖片預(yù)覽功能ImagePreview的問題解決

    vue+vant使用圖片預(yù)覽功能ImagePreview的問題解決

    這篇文章主要介紹了vue+vant使用圖片預(yù)覽功能ImagePreview的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Vue.js devtool插件安裝后無法使用的解決辦法

    Vue.js devtool插件安裝后無法使用的解決辦法

    Vue.js devtool插件最近在開發(fā)人員中很火,這篇文章主要為大家詳細(xì)介紹了Vue.js devtool插件安裝后無法使用,出現(xiàn)提示“vue.js not detected”的解決辦法
    2017-11-11
  • 探秘vue-rx 2.0(推薦)

    探秘vue-rx 2.0(推薦)

    這篇文章主要介紹了探秘vue-rx 2.0(推薦),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09

最新評(píng)論