vue使用過(guò)濾器格式化日期
本文實(shí)例為大家分享了vue使用過(guò)濾器格式化日期的具體代碼,供大家參考,具體內(nèi)容如下
案例要求

案例講解
1、查看未過(guò)濾格式化的日期格式
2、設(shè)置模板函數(shù)format 接收日期值和日期格式
3、按照日期格式對(duì)日期進(jìn)行拼接并返回值
4、將拼接好的日期顯示在頁(yè)面上
最終案例效果

代碼
設(shè)置日期顯示格式
<div id="app">
<div>{{date }}</div>
<div>{{date | format('yyyy-MM-dd')}}</div>
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
<div>{{date | format('yyyy-MM-dd hh:mm:ss:S')}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// Vue.filter('format', function (value, arg) {
// // console.log(arg);
// if (arg == 'yyyy-MM-dd') {
// var ret = '';
// ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
// return ret;
// }
// })
Vue.filter('format', function (value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d +)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小時(shí)
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t];
if (v != undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
var vm = new Vue({
el: "#app",
data: {
date: new Date(),
},
});
</script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 如何使用vue過(guò)濾器filter
- Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹
- Vue3不支持Filters過(guò)濾器的問(wèn)題
- Vue封裝全局過(guò)濾器Filters的步驟
- Vue filter 過(guò)濾器、以及在table中的使用介紹
- vue 將多個(gè)過(guò)濾器封裝到一個(gè)文件中的代碼詳解
- vue通過(guò)過(guò)濾器實(shí)現(xiàn)數(shù)據(jù)格式化
- vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析
- 詳解Vue串聯(lián)過(guò)濾器的使用場(chǎng)景
- vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題
- 過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)
- vue3刪除過(guò)濾器的原因
相關(guān)文章
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一種組件間通信的方式,它允許父組件向子組件傳遞數(shù)據(jù),而不需要通過(guò)props或事件來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue2/vue3中provide/inject的基本用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue2實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue2如何實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁(yè)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03
vue+ElementPlus框架Container 布局容器不能鋪滿整個(gè)屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個(gè)屏幕的解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果,大致包含兩個(gè)效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解
這篇文章主要介紹了Vue中使用Echarts響應(yīng)式布局flexible.js+rem適配方案詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò)(示例代碼)
這篇文章主要介紹了element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò),使用方法對(duì)校驗(yàn)數(shù)據(jù)進(jìn)行過(guò)濾判斷,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
vue+element實(shí)現(xiàn)表單校驗(yàn)功能
這篇文章主要介紹了vue+element表單校驗(yàn)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05

