vue cli 3 全域性過濾器

2021-09-24 17:27:47 字數 1216 閱讀 2278

在vue1.x版本裡是自帶裡幾個基礎的過濾器的(雖然不怎麼用到)。

到了vue2.x版本之後,內建到幾個過濾器就被刪掉了,如果需要用到過濾器,就要開發者自己去定義。

可以把過濾器定義在某個元件內部,但這樣就成了區域性過濾器,在別的元件裡是無法使用的。所以通常不會這麼做。

也可以把過濾器寫在main.js裡。但如果專案中存在多個過濾器,這會使main.js檔案看上去很龐大,不便於後期維護。

所以通常會新建乙個js檔案,專門用來存放所有過濾器。最後再引到main.js中供全域性使用。

首先新建乙個filters.js檔案。把這個檔案放在src/assets裡。

因為這裡是用來存放靜態資源的。這個資料夾可以用來存放、css和部分自定義的功能的js資源。如果需要更好的分類,可以在assets資料夾裡再建立jscssimg等資料夾。

這裡我建立了3個過濾器

//  轉小寫

let lower = value => value.tolowercase();

// 轉大寫

Vue2 全域性過濾器(vue cli)

先看官方簡介 當前元件註冊 export default filters uppercase 但是我們做專案來說,大部分的過濾器是要全域性使用的,不會每每用到就在元件裡面去寫,嗯,還是抽成全域性的會更好些。全域性註冊 官網 1 註冊 2 vue.filter my filter function v...

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,但是控制不同作用,乙個是全域性的...

自定義過濾器和全域性過濾器

過濾器中必須有返回值 一般使用花括號 插值,管道符前是要過濾的元素,管道符之後是過濾方法 p 過濾方法中有乙個引數,這個引數就是傳進來的要過濾的元素 過濾器 filters 使用過濾器時出現死迴圈 因為在將原陣列排序後賦值給原陣列,引用空間沒有變化,過濾一直在執行 解決辦法 使用擴充套件符將陣列賦值...