十分鐘帶你讀懂Vue中的過(guò)濾器
一、什么是過(guò)濾器
過(guò)濾器提供給我們的一種數(shù)據(jù)處理方式。過(guò)濾器功能不是必須要使用的，因?yàn)樗鶎?shí)現(xiàn)的功能也能用計(jì)算屬性或者函數(shù)調(diào)用的方式來(lái)實(shí)現(xiàn)。
Vue.js 允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。
二、過(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) {
// 編寫(xiě)過(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è)字母大寫(xiě)，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)為大寫(xiě)。
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)換為大寫(xiě)形式，將數(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)大寫(xiě)的過(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ù)開(kāi)始，才是調(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)大寫(xiě)的過(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)目開(kāi)發(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組件通信入門(mén)之Provide和Inject機(jī)制
這篇文章主要給大家介紹了關(guān)于Vue組件通信入門(mén)之Provide和Inject機(jī)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue組件通信具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒(méi)報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問(wèn)題,具體細(xì)節(jié)問(wèn)題參考下本文詳細(xì)講解2024-02-02
詳解Vue單元測(cè)試Karma+Mocha學(xué)習(xí)筆記
本篇文章主要介紹了詳解Vue單元測(cè)試Karma+Mocha學(xué)習(xí)筆記，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本篇文章主要介紹了深入解析Vue 組件命名那些事，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
當(dāng)vue使用庫(kù)中的getvalue方法時(shí)，需要調(diào)用相關(guān)方法，通過(guò)定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對(duì)vue使用引用庫(kù)中的方法，感興趣的朋友一起看看吧2021-07-07
ElementUI?組件之Layout布局(el-row、el-col)
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢(shì),其實(shí) v-model 實(shí)際上是一個(gè)語(yǔ)法糖,本文將給大家介紹一下vue中v-model的實(shí)現(xiàn)原理,文中有相關(guān)的代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
npm install卡在“sill idealTree buildDeps“問(wèn)題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問(wèn)題的兩種解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03