vue2.0 自定義日期時(shí)間過(guò)濾器
更新時(shí)間：2017年06月07日 14:59:35 作者：m0_37068028
本文給大家?guī)?lái)兩種方法實(shí)現(xiàn)vue2.0 自定義日期時(shí)間過(guò)濾器，需要的的朋友參考下吧
方法一：
// template
{{a | data}}
//script
data:{
a: Date.now()
}
filters: {
data:function (input) {
var d = new Date(input);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
var hour = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
return year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
}
方法二： 正則
// template
{{date | formatDate}}
//script
import {formatDate} from '../../common/js/date'
filters: {
formatDate (time) {
let date = new Date(time)
return formatDate(date, 'yyyy-MM-dd hh:mm')
}
}
//date.js
export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero (str) {
return ('00' + str).substr(str.length)
}
以上所述是小編給大家介紹的vue2.0 自定義日期時(shí)間過(guò)濾器，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
關(guān)于el-form中el-input輸入框的寬度問(wèn)題詳解
自從用了element-ui,確實(shí)好用,該有的組件都有,下面這篇文章主要給大家介紹了關(guān)于el-form中el-input輸入框的寬度問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-01-01
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue路由第二次進(jìn)入頁(yè)面created和mounted不執(zhí)行問(wèn)題及解決
這篇文章主要介紹了vue路由第二次進(jìn)入頁(yè)面created和mounted不執(zhí)行問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue-router+nginx 非根路徑配置方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vant開(kāi)發(fā)微信小程序安裝以及簡(jiǎn)單使用教程
這篇文章主要介紹了vant開(kāi)發(fā)微信小程序安裝以及簡(jiǎn)單使用教程,需要的朋友可以參考下2022-12-12
平常使用Vue開(kāi)發(fā)時(shí),一個(gè)項(xiàng)目中多個(gè)地方需要用到的相同組件通常我們會(huì)封裝為一個(gè)公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
在vue中最常用的應(yīng)該就是axios了，這是一個(gè)很強(qiáng)大的處理ajax的庫(kù)。今天我就分享一下我是如何封裝axios的。axios的基本api不再贅述，提前安裝一下也不用我說(shuō)了吧2021-06-06
JavaScript的Vue.js庫(kù)入門(mén)學(xué)習(xí)教程
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫(kù)入門(mén)學(xué)習(xí)教程,包括其架構(gòu)思想與核心的數(shù)據(jù)綁定方式等,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了使用vuepress搭建靜態(tài)博客的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02