前言

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

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

都9012了，我們就采用 ES Module的寫(xiě)法，在vue初始化的項(xiàng)目src的文件中新建一個(gè)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(), // 小時(shí)
  "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. 使用過(guò)濾器 DateFmt

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

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

3. 在JS中使用 DateFmt

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

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

回到開(kāi)頭，我們強(qiáng)調(diào)了一下，過(guò)濾器其實(shí)就是一個(gè)函數(shù)。既然是函數(shù)，那引入就好了。所以在我們最初建立 DateFormat.vue 單文件組件的<script>塊中使用import { DateFmt } from '@/filters/DateFmt.js'導(dǎo)入我們的函數(shù)。代碼如下：

<script>
import { DateFmt } from '@/filters/DateFmt.js';
export default {
data(){
return{
curDateImportFilter: DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')
}}}
</script>

在我們<template>中新加一個(gè)元素，并綁定 curDateImportFilter屬性，運(yùn)行 npm run serve 回到瀏覽器，你就會(huì)看到兩個(gè)格式化日期。這樣好嗎？我們多了一個(gè)import , 雖然實(shí)現(xiàn)了，但覺(jué)得不夠好。

3.2 使用Vue.filter 返回過(guò)濾器

如果我們仔細(xì)看官方文檔，就會(huì)發(fā)現(xiàn)官說(shuō)明了，通過(guò) Vue.filter("filter")返回定義的函數(shù) ,所以Vue.filter不僅可以注冊(cè)，還可以返回。

我們繼續(xù)在data中添加屬性 :

curDateVueFilter: Vue.filter("DateFmt")(new Date(), 'yyyy-MM-dd hh:mm:ss')

通過(guò)上邊的步驟綁定該屬性，你會(huì)在瀏覽器上看到三個(gè)格式化好的日期。要使用Vue.filter,我們不得不額外的導(dǎo)入import Vue from 'vue'。跟上邊一樣，雖然實(shí)現(xiàn)了，但不夠好。

3.3 使用實(shí)例屬性$options

在vue組件，每個(gè)組件都有各自的屬性，這些屬性大多掛載中屬性 $options中，在chrome瀏覽器打印$vm0信息，我們就找到filter的信息。這里科普一下，在安裝vue開(kāi)發(fā)者工具后$vm0表示我們當(dāng)前選擇的組件，結(jié)果如下圖所示：

從圖形上看，當(dāng)前組件的filters為一個(gè)對(duì)象，并不能直接找到，不過(guò)展開(kāi)至__proto__原型上看到了我們的DateFmt方法。好了現(xiàn)在我們?cè)诶^續(xù)在data中添加屬性

curDateOptFilter: this.$options.filters.DateFmt(new Date(), 'yyyy-MM-dd hh:mm:ss')

是的，采用這個(gè)方式，就不用再引入vue或者函數(shù)了，跟直接在template使用一樣。簡(jiǎn)潔方便，感覺(jué)好多了。在深入一點(diǎn)，通過(guò)調(diào)試我們就會(huì)發(fā)現(xiàn) Vue.filter 是調(diào)用options.filters原型上的方法，如下圖所示

4. 總結(jié)

再簡(jiǎn)單的功能，也有你想不到的用法。做開(kāi)發(fā)，還是要會(huì)發(fā)散。本來(lái)這篇文章還想分享一下 vue 中scope css穿透功能。為了方便閱讀，就且聽(tīng)下回分解吧。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論