成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

自定義一個時間過濾器

soasme / 1465人閱讀

摘要：我用的創(chuàng)建了一個自定義的過濾器，可以把后臺傳過來的統(tǒng)一格式的時間過濾成上述的三種格式的時間，具體代碼如下今天昨天前天前端新人一個，第一次在這里發(fā)表自己的文章，也有半年都沒有寫過學習筆記文章了。

最近公司在開發(fā)一款app，前端用的是Vue,因為業(yè)務需求中需要對后臺傳過來的統(tǒng)一格式的時間（年-月-日 時：分）在不同場景下分別用不同的格式表示，如：
1、今天/昨天的時間就用“今天/昨天 時：分”表示；
2、一個月內(nèi)的時間用“月-日 時：分”表示；
3、超過一個月的就直接使用標準時間格式“年-月-日 時：分”表示。
我用Vue的filter創(chuàng)建了一個自定義的過濾器，可以把后臺傳過來的統(tǒng)一格式的時間過濾成上述的三種格式的時間，具體代碼如下：

export default function (time) {
    var date = (typeof time === "number") ? new Date(time) : new Date((time || "").replace(/-/g, "/"))
    // console.log(date)
    var diff = (((new Date()).getTime() - date.getTime()) / 1000)
    var dayDiff = Math.floor(diff / 86400)

    var isValidDate = Object.prototype.toString.call(date) === "[object Date]" && !isNaN(date.getTime())

    if (!isValidDate) {
        console.error("not a valid date")
        return time
    }

        var today = new Date(date)
        var year = today.getFullYear()
        var month = ("0" + (today.getMonth() + 1)).slice(-2)
        var day = ("0" + today.getDate()).slice(-2)
        var hour = ("0" + today.getHours()).slice(-2)
        var minute = ("0"+today.getMinutes()).slice(-2)


    if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
        return `${year}-${month}-${day} ${hour}:${minute}`
    }

        return dayDiff === 0 && (
            diff < 86400 && "今天" + `${hour}:${minute}`
            ) ||
            dayDiff < 2 && "昨天" + `${hour}:${minute}`||
            dayDiff < 3 && "前天" + `${hour}:${minute}`||
            dayDiff < 31 && `${month}-${day} ${hour}:${minute}`
}

前端新人一個，第一次在這里發(fā)表自己的文章，也有半年都沒有寫過學習筆記文章了。感覺表達能力比較欠缺，所以考慮后決定先寫這篇主要是代碼的，工具性的文章，爭取以后多寫一些理解性的文章。新年快樂！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81359.html

相關(guān)文章

  • Vue_Vue權(quán)威指南

    摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫。 Vue通過簡單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

    SimonMa 評論0 收藏0

  • VUE實例圖解

    摘要：案例品牌列表構(gòu)建基本結(jié)構(gòu)利用的樣式數(shù)據(jù)要雙向更新，所以要用到，同時在后面的中要進行初始化為添加按鈕綁定事件的中，綁定值為關(guān)鍵字刪除標簽綁定函數(shù)，傳入?yún)?shù)的時候，需要用括號事件修飾符，表示阻止默認事件實例對象新建一個實例函數(shù)中初始化需要雙向 VUE案例 品牌列表 構(gòu)建基本結(jié)構(gòu) 利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

    wqj97 評論0 收藏0

  • AngularJs

    摘要：當左右服務都被解析并返回時，會以服務為參數(shù)去調(diào)用組件的構(gòu)造函數(shù)。發(fā)送或廣播的消息應該限定在最小的作用域。置頂一個通過，發(fā)送的消息列表并且窒息的管理以防止命名沖突在需要格式化數(shù)據(jù)時，將格式 angular 數(shù)據(jù)雙向綁定的框架 提供數(shù)據(jù)綁定，DOM指令。angular，定義了一套規(guī)則，開發(fā)中就必須遵守規(guī)則，這套規(guī)則為項目提供了一套解決方案。 模塊，組件，模板，元數(shù)據(jù)，數(shù)據(jù)綁定, 指令，服務...

    sf190404 評論0 收藏0

  • [叁]Flask web開發(fā):模板

    摘要：使用真實值替代變量，再返回最終得到的響應字符串，這一過程成為渲染。渲染模板渲染模板提供的函數(shù)把模板引擎集成到了程序中。隨后的參數(shù)都是鍵值對，表示模板中變量對應的真實值。程序現(xiàn)在使用的模板繼承自不是直接繼承自的基模板。 本系列筆記是我閱讀Miguel Grinberg的《Flask Web Development》的筆記，標題與書本同步。希望通過記錄技術(shù)筆記的方式促進自己對知識的理解。 ...

    mochixuan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<