千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > web前端技巧|vue過(guò)濾器的那點(diǎn)事

web前端技巧|vue過(guò)濾器的那點(diǎn)事

來(lái)源:千鋒教育
發(fā)布人:小千
時(shí)間: 2021-06-04 09:03:00 1622768580

      關(guān)于vue的過(guò)濾器,其實(shí)在vue1.0的時(shí)候是內(nèi)置了過(guò)濾器的,但是自從到了2.0之后就被去掉了,但是我們可能還會(huì)使用到,所以就需要自己定義過(guò)濾器了,下面小千就帶你了解一下如何定義過(guò)濾器和過(guò)濾器都有哪些種類(lèi)。

web前端

      vue 過(guò)濾器分類(lèi)

      過(guò)濾器分為兩種,一種是局部過(guò)濾器,一種全局過(guò)濾器。所有的過(guò)濾器都是函數(shù),并且參數(shù)為要過(guò)濾的數(shù)據(jù)。

      局部過(guò)濾器:只允許在當(dāng)前組件中使用

      全局過(guò)濾器:所有組件都可以使用

      1.局部過(guò)濾器

vue局部過(guò)濾器

      以上代碼 filters 這個(gè)對(duì)象定義的就是局部過(guò)濾器,下面代碼展示在組建中如何使用過(guò)濾器:

使用過(guò)濾器

      當(dāng)然你也應(yīng)該在想,這樣的過(guò)濾器使用起來(lái)可能會(huì)比較笨重,不夠靈活,過(guò)濾器既然是函數(shù),那是否可以傳參呢?接下來(lái)我們通過(guò)參數(shù)讓過(guò)濾器的使用變得更加靈活。

傳參過(guò)濾器

      2.全局過(guò)濾器

全局過(guò)濾器

      總結(jié)

      全局的過(guò)濾器要比局部過(guò)濾器使用的更廣泛一些,說(shuō)白了我們?yōu)槭裁匆褂眠^(guò)濾器,其實(shí)就跟使用函數(shù)是一樣,我們想把一些方法封裝,供其它組件使用,這樣調(diào)用起來(lái)方便,開(kāi)發(fā)更快捷。

      注意: 如果全局過(guò)濾器和局部過(guò)濾器名字重復(fù),我們會(huì)按照遠(yuǎn)近使用,優(yōu)先級(jí) : 局部>全局

      過(guò)濾器并不是只可以使用一個(gè),一個(gè)數(shù)據(jù)可以用多個(gè)過(guò)濾器,從左向右執(zhí)行,注意的下一個(gè)過(guò)濾器接收的是上一個(gè)過(guò)濾器的處理結(jié)果,因此千萬(wàn)要注意使用順序

      以上就是vue過(guò)濾器的那點(diǎn)事了,最后歡迎對(duì)web前端開(kāi)發(fā)感興趣的同學(xué)來(lái)到千鋒大前端培訓(xùn)班參加我們的課程學(xué)習(xí),現(xiàn)在咨詢(xún)還可以領(lǐng)取全套前端學(xué)習(xí)資料,趕緊來(lái)找在線老師了解一下吧。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
oracle怎么樣實(shí)現(xiàn)數(shù)據(jù)庫(kù)跨機(jī)房同步?

一、oracle怎么樣實(shí)現(xiàn)數(shù)據(jù)庫(kù)跨機(jī)房同步除了使用第三方工具,Oracle提供了extended cluster可以實(shí)現(xiàn)類(lèi)似的功能,使用Oracle RAC + ASM。簡(jiǎn)單說(shuō)下...詳情>>

2023-10-14 01:57:43
web網(wǎng)站性能測(cè)試的常用指標(biāo)有哪些?

一、頁(yè)面加載時(shí)間頁(yè)面加載時(shí)間是衡量網(wǎng)站性能的重要指標(biāo)之一,它指的是從用戶(hù)請(qǐng)求一個(gè)頁(yè)面到頁(yè)面完全加載完成所需的時(shí)間。頁(yè)面加載時(shí)間的長(zhǎng)短直...詳情>>

2023-10-14 01:50:34
MySQL索引為什么能讓查詢(xún)效率提高?

一、MySQL索引為什么能讓查詢(xún)效率提高DB在執(zhí)行一條Sql語(yǔ)句的時(shí)候,默認(rèn)的方式是根據(jù)搜索條件進(jìn)行全表掃描。如果我們對(duì)某一字段增加索引,查詢(xún)時(shí)...詳情>>

2023-10-14 01:38:15
什么是面向云原生系統(tǒng)的智能運(yùn)維?

一、云原生系統(tǒng)概述云原生系統(tǒng)是指在云計(jì)算環(huán)境下構(gòu)建和運(yùn)行的應(yīng)用程序系統(tǒng),具備高可用、彈性擴(kuò)展、靈活部署和自動(dòng)化管理等特點(diǎn)。它采用容器化...詳情>>

2023-10-14 01:25:33
怎么提升excel數(shù)據(jù)表訪問(wèn)運(yùn)算速度?

一、怎么提升excel數(shù)據(jù)表訪問(wèn)運(yùn)算速度目前版本Excel最大列數(shù)為16384,沒(méi)有10w加。運(yùn)算速度和Excel中是否有公式、公式的復(fù)雜度、對(duì)象的對(duì)少、格...詳情>>

2023-10-14 01:22:48
快速通道