成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

自定義一個(gè)時(shí)間過濾器

soasme / 1409人閱讀

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

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

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}`
}

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

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

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

相關(guān)文章

  • Vue_Vue權(quán)威指南

    摘要：效率不高，很多多余，稱之為臟檢查。通過索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機(jī)制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個(gè)構(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實(shí)例圖解

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

    wqj97 評論0 收藏0

  • AngularJs

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

    sf190404 評論0 收藏0

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

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

    mochixuan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<