過濾器私有方式應用

2021-10-01 19:25:42 字數 972 閱讀 8797

目標:

知道什麼是過濾器
什麼是過濾器:

答: 在專案應用中,同樣乙份資料資訊,表現形式確有千差萬別,例如時間資訊可以是物件、時間戳、格式化等,字串可以是大寫的、小寫的、首字母大寫的等等,如果提供方給我們提供的資訊是其中一種形式,而我們需要的是另一種,在vue中,可以通過 「過濾器」 轉換處理。過濾器是vue中實現資料格式轉換的一種機制。本質就是函式
如下時間資訊通過 物件形式 或 時間戳方式顯示都不合適,但是變為格式化時間就比較友好

thu mar 21 2019 17:48:17 gmt+0800     =>   2019-03-21 17:48:17

1553161717 => 2019-03-21 17:48:17

過濾器關鍵字:filter、filters

私有方式應用

宣告私有過濾器語法:

vue例項化過程中,與el、data平行的位置宣告filters成員並在其中製作過濾器,這個過濾器只能被當前vue例項使用,稱為 「私有過濾器」

new vue(

過濾器名稱(被處理的資料),

...}})

使用:

}
過濾器被設定到應用資料的尾部,通過 「|豎線」 連線

設定字串以指定的位數輸出,不夠就在字串前邊補位

// 字串.padstart(位數,補位資訊)

'hello'.padstart(8,0) // 000hello

注意:

過濾器只可以用在兩個地方: 插值表示式和 :冒號 屬性繫結表示式。

插值表示式: }

v-bind屬性繫結中使用: 《標籤 :屬性=「資料 | 過濾器">

v-if=「city|xx」 錯誤

過濾器的應用

1 說明 2 分析 因為乙個 可能有多個頁面,無論哪個頁面被訪問,都要統計訪問次數,所以使用過濾器最為方便。因為需要分ip統計,所以可以在過濾器中建立乙個map,使用ip為key,訪問次數為value。當有使用者訪問時,獲取請求的ip,如果ip在map中存在,說明以前訪問過,那麼在訪問次數上加1,即...

18 私有過濾器 html

id name 搜尋name關鍵字 idname ctime operation 刪除 id name 搜尋name關鍵字 idname ctime operation 刪除 預設給pattern乙個預設值 防止上面的函式不穿值 導致undefined vue.filter dataformat f...

Vue 過濾器案例(全域性過濾器和區域性過濾器)

doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat,但是控制不同作用,乙個是全域性的...