說明

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

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

console.log(new Date());

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

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

過濾器

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

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

使用的方式

{{ 過濾器數據| 過濾器名稱 }}

具體代碼

代碼如下：

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(),

},

});

代碼的運行結果如下所示：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。