首頁(yè)技術(shù)文章正文

如何在Vue中定義和調(diào)用過(guò)濾器?

更新時(shí)間:2023-07-26 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

過(guò)濾器(Filters)是 vue 為開(kāi)發(fā)者提供的功能,常用于文本的格式化。過(guò)濾器可以用在兩個(gè)地方:插值表達(dá)式和 v-bind 屬性綁定。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部,由“管道符”進(jìn)行調(diào)用,示例代碼如下:

<l--在雙花括號(hào)中通過(guò)“管道符“調(diào)用capitalize過(guò)濾器,對(duì)message的值進(jìn)行格式化-->
<p>{{ message | capitalize }}</p>

<!--在v-bind 中通過(guò)“管道符”調(diào)用 formatId過(guò)濾器,對(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: {
        message: 'hello vue. js',
        info: 'title info'
    },
    filters: { // 在 filters 節(jié)點(diǎn)下定義“過(guò)濾器”
        capitalize(str) { //把首字母轉(zhuǎn)為大寫的過(guò)濾器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

在 filters 節(jié)點(diǎn)下定義的過(guò)濾器,稱為“私有過(guò)濾器”,因?yàn)樗荒茉诋?dāng)前 vm 實(shí)例所控制的 el 區(qū)域內(nèi)使用。

如果希望在多個(gè) vue 實(shí)例之間共享過(guò)濾器,則可以按照如下的格式定義全局過(guò)濾器:

// 全局過(guò)濾器-獨(dú)立于每個(gè)vm實(shí)例之外
// Vue.filter()方法接收兩個(gè)參數(shù):
//     第 1 個(gè)參數(shù),是全局過(guò)濾器的“名字“
//     第 2 個(gè)參數(shù),是全局過(guò)濾器的“處理函數(shù)“
Vue.filter('capitalize', (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

過(guò)濾器可以串聯(lián)地進(jìn)行調(diào)用,例如:

<!--把 message的值,交給filterA 進(jìn)行處理-->
<!--把filterA處理的結(jié)果,再交給filterB進(jìn)行處理-->
<!--最終把filterB處理的結(jié)果,作為最終的值渲染到頁(yè)面上-->
{{ message | filterA | filterB }}

連續(xù)調(diào)用多個(gè)過(guò)濾器的示例代碼如下:

<!--串聯(lián)調(diào)用多個(gè)過(guò)濾器-->
<p>{{text | capitalize | maxLength)}</p>

//全局過(guò)濾器-首字母大寫
Vue.filter('capitalize', (str) => {
  return str.charAt(0).tolpperCase() + str.slice(1) + '--'
})

//全局過(guò)濾器 - 控制文本的最大長(zhǎng)度
Vue.filter('maxLength', (str) => {
if (str.length <= 10) return str
return str.slice(0, 11) +'…'
})

過(guò)濾器的本質(zhì)是 JavaScript 函數(shù),因此可以接收參數(shù),格式如下:

<!-- arg1和 arg2 是傳遞給 filterA 的參數(shù)-->
<p>{{ message | filterA(arg1, arg2) }}</p>

//過(guò)濾器處理函數(shù)的形參列表中:
//  第一個(gè)參數(shù):永遠(yuǎn)都是”管道符“前面待處理的值
//  從第二個(gè)參數(shù)開(kāi)始,才是調(diào)用過(guò)濾器時(shí)傳遞過(guò)來(lái)的arg1和arg2參數(shù)
Vue.filter('filterA',(msg, arg1, arg2) =>{
  //過(guò)濾器的代碼邏輯...
})

過(guò)濾器傳參,示例代碼如下:

<!--調(diào)用 maxlength 過(guò)濾器時(shí)傳參-->
<p>{{text | capitalize | maxLength(5)}}</p>

//全局過(guò)濾器 - 首字母大寫
Vue.filter('capitalize',(str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

//全局過(guò)濾器-控制文本的最大長(zhǎng)度
Vue.filter('maxLength', (str, len = 10) => {
  if (str.length A len) return str
  return str.slice(0, len) +'…
})

過(guò)濾器的兼容性

過(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ò)濾器功能

具體的遷移指南,請(qǐng)參考 vue 3.x 的官方文檔給出的說(shuō)明:

https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!