十分鐘帶你讀懂Vue中的過(guò)濾器
一、什么是過(guò)濾器
過(guò)濾器提供給我們的一種數(shù)據(jù)處理方式。過(guò)濾器功能不是必須要使用的，因?yàn)樗鶎?shí)現(xiàn)的功能也能用計(jì)算屬性或者函數(shù)調(diào)用的方式來(lái)實(shí)現(xiàn)。
Vue.js 允許你自定義過(guò)濾器，可被用于一些常見的文本格式化。
二、過(guò)濾器聲明與使用
過(guò)濾器應(yīng)該被添加在JavaScript 表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用。
過(guò)濾器可以用在兩個(gè)地方：插值表達(dá)式和v-bind 屬性綁定。
示例：
在 {{ }} 中，通過(guò)管道符 " | " 調(diào)用 capitalize() ，對(duì)message進(jìn)行格式化。
<p>{{ message | capitalize }}</p>
在 v-bind中，通過(guò)管道符 " | " 調(diào)用 formatId() ，對(duì)rawId進(jìn)行格式化。
<div v-bind:id="rawId | formatId"></div>
在創(chuàng)建 vue 實(shí)例期間，可以在 filters 節(jié)點(diǎn)中定義過(guò)濾器
示例：
const vm = new Vue({
el: '#app',
data: {
...
},
filters: {
capitalize(str) {
// 編寫過(guò)濾的邏輯，即對(duì)入?yún)tr的處理
return ...;
}
}
})
完整案例
<div id="app">
<p :title="info | capitalize">{{message | capitalize}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
filters: {
capitalize(str) {
// 第一個(gè)字母大寫，slice(1) 拼接上下標(biāo)為1之后的字母
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})
</script>輸出結(jié)果
Hello vue.js
str.charAt(0).toUpperCase()：表示取下標(biāo)為0的字母，并將其轉(zhuǎn)為大寫。
str.slice(1)：表示從str中提取第2個(gè)字符到最后的字符，并返回新字符串。
三、Vue過(guò)濾器的分類
1.按照作用范圍分類
按照作用范圍分類，可以分為全局過(guò)濾器和局部過(guò)濾器
（1）全局過(guò)濾器：通過(guò)Vue.filter()方法定義的過(guò)濾器，在整個(gè)應(yīng)用程序中都可以使用。
（2）局部過(guò)濾器：在Vue組件選項(xiàng)中通過(guò)filters屬性定義的過(guò)濾器，只能在該組件及其子組件中使用（就是上述的案例代碼）。
示例代碼
<div id="app1">
<p :title="info | capitalize">{{message | capitalize}}</p>
</div>
<div id="app2">
<p>{{abc | capitalize}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
// 全局過(guò)濾器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
})
</script>
<script>
const vm1 = new Vue({
el: '#app1',
data: {
message: 'hello vue.js',
info: 'title info',
},
// 私有過(guò)濾器，只能被當(dāng)前 vm 所控制的區(qū)域所使用
filters: {
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
},
})
</script>
<script>
const vm2 = new Vue({
el: '#app2',
data: {
abc: 'abc'
}
})
</script>運(yùn)行結(jié)果
上述代碼的含義大致是：
2.按照使用方式分類
按照使用方式分類，可以分為普通過(guò)濾器和帶參數(shù)過(guò)濾器
（1）普通過(guò)濾器：不帶參數(shù)的過(guò)濾器，可以對(duì)數(shù)據(jù)進(jìn)行簡(jiǎn)單的格式化或轉(zhuǎn)換，例如將字符串轉(zhuǎn)換為大寫形式，將數(shù)字格式化為貨幣格式等。
這個(gè)也就是我們上述代碼的例子。
（2）帶參數(shù)過(guò)濾器：帶有一個(gè)或多個(gè)參數(shù)的過(guò)濾器，可以根據(jù)參數(shù)的不同實(shí)現(xiàn)不同的功能，例如根據(jù)參數(shù)過(guò)濾數(shù)組，根據(jù)參數(shù)指定日期格式等。
除此之外，Vue.js的過(guò)濾器還可以按照數(shù)據(jù)類型進(jìn)行分類，例如針對(duì)字符串、數(shù)字、日期、數(shù)組等不同的數(shù)據(jù)類型，提供了不同的過(guò)濾器實(shí)現(xiàn)。
具體示例請(qǐng)看第五點(diǎn)。
四、連續(xù)調(diào)用多個(gè)過(guò)濾器
過(guò)濾器可以串聯(lián)地進(jìn)行調(diào)用
格式
{{message|filterA|filterB|filterC}}
- 把message的值交給filterA進(jìn)行處理
- 把filterA處理的結(jié)果，再交給filterB進(jìn)行處理
- 把filterB處理的結(jié)果，再交給filterC進(jìn)行處理
- 最后把filterC處理的結(jié)果作為最終的值渲染到頁(yè)面上
說(shuō)白了，就是將前者過(guò)濾后的值交給后者過(guò)濾，直至最后一個(gè)！
完整示例代碼
<div id="app">
<p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
// 全局過(guò)濾器
// 首字母轉(zhuǎn)大寫的過(guò)濾器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// 定義控制文本長(zhǎng)度的過(guò)濾器
Vue.filter('maxLength', (str) => {
if (str.length <= 10) return str
return str.slice(0, 10) + '...'
})
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
})
</script>運(yùn)行結(jié)果
Hello vue....
五、過(guò)濾器傳參
過(guò)濾器的本質(zhì)是 JavaScript 函數(shù)，因此可以接收參數(shù)
格式如下
<p>{{ message | filterA(arg1, arg2)}}</p>
Vue.filter('filterA', (msg, arg1, arg2) => {
// 過(guò)濾器邏輯代碼
})
參數(shù)解析
第一個(gè)參數(shù)：永遠(yuǎn)都是“管道符”前面待處理的值
從第二個(gè)參數(shù)開始，才是調(diào)用過(guò)濾器時(shí)傳遞過(guò)來(lái)的arg1參數(shù) 和 arg2參數(shù)
完整示例代碼
<div id="app">
<p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
</div>
<script src="../../lib/vue-2.6.12.js"></script>
<script>
// 全局過(guò)濾器
// 首字母轉(zhuǎn)大寫的過(guò)濾器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// 定義控制文本長(zhǎng)度的過(guò)濾器
Vue.filter('maxLength', (str, len = 10) => {
if (str.length <= len) return str
return str.slice(0, len) + '...'
})
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
})
</script>運(yùn)行結(jié)果
Hel...
六、過(guò)濾器的兼容性問(wèn)題
過(guò)濾器僅在vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了過(guò)濾器相關(guān)的功能。
在企業(yè)級(jí)項(xiàng)目開發(fā)中
如果使用的是2.x 版本的 vue，則依然可以使用過(guò)濾器相關(guān)的功能
如果項(xiàng)目已經(jīng)升級(jí)到了3.x 版本的 vue，官方建議使用計(jì)算屬性或方法代替被剔除的過(guò)濾器功能
以上就是十分鐘帶你讀懂Vue中的過(guò)濾器的詳細(xì)內(nèi)容，更多關(guān)于Vue過(guò)濾器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小的代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊圖標(biāo)放大離開時(shí)縮小，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
dhtmlxGantt是一個(gè)強(qiáng)大的JavaScript Gantt圖表庫(kù),提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時(shí)間線和計(jì)劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3封裝實(shí)現(xiàn)右鍵菜單組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2025-02-02
這篇文章主要介紹了vue中組件參數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
Vue實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來(lái)實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
在vue中實(shí)現(xiàn)給每個(gè)頁(yè)面頂部設(shè)置title
這篇文章主要介紹了在vue中實(shí)現(xiàn)給每個(gè)頁(yè)面頂部設(shè)置title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue實(shí)現(xiàn)全局組件自動(dòng)注冊(cè),無(wú)需再單獨(dú)引用
這篇文章主要介紹了vue實(shí)現(xiàn)全局組件自動(dòng)注冊(cè)，無(wú)需再單獨(dú)引用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問(wèn)題
今天小編就為大家分享一篇解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09