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

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

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

<！--在v-bind 中通過“管道符”調(diào)用 formatId過濾器，對rawId的值進(jìn)行格式化-->
<div v-bind:id="rawId| formatId"></div>

在創(chuàng)建 vue 實例期間，可以在 filters 節(jié)點(diǎn)中定義過濾器，示例代碼如下：

const vm = new Vue({
    el: '#app'，
    data: {
        message: 'hello vue. js',
        info: 'title info'
    },
    filters: { // 在 filters 節(jié)點(diǎn)下定義“過濾器”
        capitalize(str) { //把首字母轉(zhuǎn)為大寫的過濾器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

在 filters 節(jié)點(diǎn)下定義的過濾器，稱為“私有過濾器”，因為它只能在當(dāng)前 vm 實例所控制的 el 區(qū)域內(nèi)使用。

如果希望在多個 vue 實例之間共享過濾器，則可以按照如下的格式定義全局過濾器：

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

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

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

連續(xù)調(diào)用多個過濾器的示例代碼如下：

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

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

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

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

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

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

過濾器傳參，示例代碼如下：

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

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

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

過濾器的兼容性

過濾器僅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了過濾器相關(guān)的功能。

在企業(yè)級項目開發(fā)中：

? 如果使用的是 2.x 版本的 vue，則依然可以使用過濾器相關(guān)的功能

? 如果項目已經(jīng)升級到了 3.x 版本的 vue，官方建議使用計算屬性或方法代替被剔除的過濾器功能

具體的遷移指南，請參考 vue 3.x 的官方文檔給出的說明：

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