一、本節(jié)說明

在使用插值表達(dá)式的時(shí)候，我們通常會(huì)有一種需求，就是將數(shù)據(jù)進(jìn)行二次的格式化。VUE的過濾器的實(shí)現(xiàn)參考了linux的shell命令的管道的實(shí)現(xiàn)原理：即上一個(gè)命令的輸出，是下一個(gè)命令的輸入。
所以過濾器可以串接使用：{{數(shù)據(jù) | 過濾器A | 過濾器B}}

除了在插值表達(dá)式中可以使用過濾器，在后文中將要學(xué)習(xí)到的v-bind指令中也可以使用過濾器。用法是一致的，到時(shí)候我們再看一看。

二、 怎么做

全局過濾器（定義一個(gè)用于做日期格式化的過濾器）

• 過濾器的第一個(gè)參數(shù)是固定的，就是輸入的數(shù)據(jù)。對于{{message|date-format('yyyy-mm-dd')}}而言，參數(shù)input=message，即“|”管道符之前的數(shù)據(jù)輸出，作為過濾器的輸入數(shù)據(jù)。
• 過濾器除了第一個(gè)參數(shù)固定是“管道輸出”，其他的參數(shù)根據(jù)需要自定義。在傳參的時(shí)候，從第二個(gè)參數(shù)開始傳入即可。{{message|date-format(message,'yyyy-mm-dd')}}寫法是錯(cuò)誤的。
• 其中l(wèi)et是ES6中定義變量的語法，類似于var，但在塊作用域方面有不同之處。可以自行搜索深入學(xué)習(xí)
• 在上文代碼中使用了 template string語法，使用該語法可以有效的解決，字符串與變量繁瑣的拼接問題?！癭”這個(gè)字符是鍵盤在英文輸入法環(huán)境中，ESC下方的那個(gè)按鍵。
• 在template string語法中，變量用${變量名}括起來。這個(gè)用法也是參考了linux的shell腳本的實(shí)現(xiàn)。
• 使用ES6中的字符串新方法String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串；padStart(2,'0')表示如果字符串長度不足2位，則左補(bǔ)0，補(bǔ)足到長度為2.
  

三、 效果

過濾器的使用方法:

{{message}}
{{message|date-format('yyyy-mm-dd')}}

瀏覽器顯示的效果:

四、 深入：私有過濾器

除了可以定義全局的過濾器，我們還可以定義私有過濾器。但是過濾器這種代碼，類似于工具類，我們一般定義為全局的，讓它在各個(gè)模塊、組件里面都可以使用。

注意：當(dāng)有局部和全局兩個(gè)名稱相同的過濾器時(shí)候，會(huì)以就近原則進(jìn)行調(diào)用，即：局部過濾器優(yōu)先于全局過濾器被調(diào)用！

以上就是vue通過過濾器實(shí)現(xiàn)數(shù)據(jù)格式化的詳細(xì)內(nèi)容，更多關(guān)于vue實(shí)現(xiàn)數(shù)據(jù)格式化的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論