說明

今天將要介紹的是vue中的過濾器，并且將實現(xiàn)一個日期格式化的小案例。

大家都知道，我們獲取當前日期可以通過Date對象獲取。下面我將獲取當前時間并打印出來。

console.log(new Date());

我們獲取的是一個標準時間，控制臺的輸出如下所示。

在實際項目開發(fā)中，我們通常獲取標準時間后不是直接拿來使用，而是要進行一些操作然后將它顯示在頁面中，我們將這些操作稱作時間格式化。

過濾器

在vue中，我們可以使用過濾器來進行時間格式化。它的寫法如下：

// Vue.filter(過濾器名稱,處理函數(shù))

使用的方式

{{ 過濾器數(shù)據(jù)| 過濾器名稱 }}

具體代碼

代碼如下：

Document

今天的日期是：{{timer|timerFilter('-')}}

Vue.filter("timerFilter", function (time, type) {

const month =

time.getMonth() + 1 > 10

? time.getMonth() + 1

: "0" + (time.getMonth() + 1);

const day =

time.getDate() > 10 ? time.getDate() : "0" + time.getDate();

return time.getFullYear() + type + month + type + day;

});

new Vue({

el: "#app",

data: {

timer: new Date(),

},

});

代碼的運行結(jié)果如下所示：

到此這篇關于vue過濾器實現(xiàn)日期格式化的案例分析的文章就介紹到這了,更多相關vue 過濾器日期格式化內(nèi)容請搜索隨便開發(fā)網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持隨便開發(fā)網(wǎng)！

總結(jié)

以上是生活随笔為你收集整理的vue 日期格式化返回指定个数月份_vue过滤器实现日期格式化的案例分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。