這篇文章將為大家詳細講解有關(guān)怎么換個角度使用VUE過濾器，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)石家莊,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

前言

過濾器在Vue中的主要用于文本格式化，如小寫轉(zhuǎn)大小，日期格式化等操作。官方對這個功能介紹也很簡單，不過確實很簡單，就一個函數(shù)而已。但最近在做兩款A(yù)PP時，遇到一些特殊的需求。然后就對vue中的filter一些用法結(jié)合源碼好好的梳理了下。下邊我們以一個日期格式化展開討論。

1. 定義一個日期格式化函數(shù)

都9012了，我們就采用 ES Module的寫法，在vue初始化的項目src的文件中新建一個filters文件夾，并在其中添加DateFmt.js文件，代碼如下

export function DateFmt(date, fmt) {
if (date == null) return null;
var o = {
  "M+": date.getMonth() + 1, // 月份
  "d+": date.getDate(), // 日
  "h+": date.getHours(), // 小時
  "m+": date.getMinutes(), // 分
  "s+": date.getSeconds(), // 秒
  "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
  "S": date.getMilliseconds()
};
if (/(y+)/.test(fmt))
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt))
    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

2. 使用過濾器 DateFmt

定義好函數(shù)后，我們采用全局注冊filter的方式。在main.js中使用import { DateFmt } from '@/filters/DateFmt.js' 導(dǎo)入我們上邊定義的函數(shù)。 使用Vue.filter("DateFmt", DateFmt) 完成filter全局注冊。

在components文件夾中，添加我們的測試組件DateFormat.vue,在該文件template>div節(jié)點下輸入{{new Date()|DateFmt('yyyy-MM-dd hh:mm:ss')}} 然后在app.vue引入我們剛新添加的組件，運行，你就會在看到當(dāng)前日期已經(jīng)按照我們需要的格式顯示在網(wǎng)頁上。是的，就是這么簡單，那完了么？

3. 在JS中使用 DateFmt

好奇的朋友會發(fā)現(xiàn)，我們定義的filter都是在template中使用的，那我如何在js代碼中使用呢？當(dāng)然，在開發(fā)這兩個app期間，減少數(shù)據(jù)轉(zhuǎn)換的次數(shù)，有了這樣的需求。

3.1 在組件頁面導(dǎo)入函數(shù)

回到開頭，我們強調(diào)了一下，過濾器其實就是一個函數(shù)。既然是函數(shù)，那引入就好了。所以在我們最初建立 DateFormat.vue 單文件組件的

在我們