web前端技巧分享:vue過濾器的那點事!

千鋒武漢發表於2021-06-04

      關於vue的過濾器,其實在vue1.0的時候是內建了過濾器的,但是自從到了2.0之後就被去掉了,但是我們可能還會使用到,所以就需要自己定義過濾器了,下面小千就帶你瞭解一下如何定義過濾器和過濾器都有哪些種類。

      vue 過濾器分類

      過濾器分為兩種,一種是區域性過濾器,一種全域性過濾器。所有的過濾器都是函式,並且引數為要過濾的資料。

      區域性過濾器:只允許在當前元件中使用

      全域性過濾器:所有元件都可以使用

      1.區域性過濾器

vue區域性過濾器

      以上程式碼 filters 這個物件定義的就是區域性過濾器,下面程式碼展示在組建中如何使用過濾器:

使用過濾器

      當然你也應該在想,這樣的過濾器使用起來可能會比較笨重,不夠靈活,過濾器既然是函式,那是否可以傳參呢?接下來我們透過引數讓過濾器的使用變得更加靈活。

傳參過濾器

      2.全域性過濾器

全域性過濾器

      總結

      全域性的過濾器要比區域性過濾器使用的更廣泛一些,說白了我們為什麼要使用過濾器,其實就跟使用函式是一樣,我們想把一些方法封裝,供其它元件使用,這樣呼叫起來方便,開發更快捷。

      注意: 如果全域性過濾器和區域性過濾器名字重複,我們會按照遠近使用,優先順序 : 區域性>全域性

      過濾器並不是只可以使用一個,一個資料可以用多個過濾器,從左向右執行,注意的下一個過濾器接收的是上一個過濾器的處理結果,因此千萬要注意使用順序

      以上就是vue過濾器的那點事了。 想了解更多關於vue的知識,歡迎關注小千喲!


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2775416/,如需轉載,請註明出處,否則將追究法律責任。

相關文章