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

過(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)為大寫(xiě)的過(guò)濾器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

在 filters 節(jié)點(diǎn)下定義的過(guò)濾器，稱(chēng)為“私有過(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ò)濾器-首字母大寫(xiě)
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ò)濾器 - 首字母大寫(xiě)
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